動態交換 CSS 檔案以轉換頁面樣式
在 Web 開發中，通常需要動態修改頁面的視覺樣式。這可以透過用不同的 CSS 檔案替換現有的 CSS 檔案來實現。以下是您無需重新載入頁面即可有效完成此操作的方法：
包含多個樣式表
首先在HTML 文件的標頭中包含所有可能的CSS 文件。在本例中，我們有「light.css」和「dark.css」。
啟動和停用樣式表
要切換活動樣式表，您可以修改與文件的關係，設定其停用屬性，或調整其媒體屬性。
使用rel=alternate
<script>
function enableStylesheet(node) {
node.rel = 'stylesheet';
}
function disableStylesheet(node) {
node.rel = 'alternate stylesheet';
}
</script>設定停用
<script>
function enableStylesheet(node) {
node.disabled = false;
}
function disableStylesheet(node) {
node.disabled = true;
}
</script>設定停用
<script>
function enableStylesheet(node) {
node.media = '';
}
function disableStylesheet(node) {
node.media = 'none';
}
</script>使用使用media 🎜>
用法範例document.querySelector('#swap-button').addEventListener('click', () => {
disableStylesheet(document.getElementById('light'));
enableStylesheet(document.getElementById('dark'));
});以上是如何動態交換 CSS 檔案以更改網頁的樣式而無需重新載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
