如何在不重新載入頁面的情況下動態交換 CSS 檔案？

用於頁面樣式修改的動態CSS 檔案交換

問題：

您有一個包含靜態CSS 檔案的網頁(light.css) 連結在標題中。您需要一個無縫機制來將頁面的樣式切換到另一個 CSS 檔案（dark.css），以取代現有樣式。

解決方案：

動態交換CSS 檔案並套用新樣式而不重新載入頁面，您可以使用下列方法之一：

1.切換「rel=alternate」屬性：

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet alternate" href="light.css" id="light" title="Light">
<link rel="stylesheet alternate" href="dark.css" id="dark" title="Dark"></code>

<code class="javascript">function enableStylesheet(node) {
  node.rel = 'stylesheet';
}

function disableStylesheet(node) {
  node.rel = 'alternate stylesheet';
}</code>

2.設定與切換「停用」屬性：

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" id="light" class="alternate">
<link rel="stylesheet" href="dark.css" id="dark" class="alternate"></code>

<code class="javascript">function enableStylesheet(node) {
  node.disabled = false;
}

function disableStylesheet(node) {
  node.disabled = true;
}

document
  .querySelectorAll('link[rel=stylesheet].alternate')
  .forEach(disableStylesheet);</code>

3.切換“media=none”屬性：

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" media="none" id="light">
<link rel="stylesheet" href="dark.css" media="none" id="dark"></code>

<code class="javascript">function enableStylesheet(node) {
  node.media = '';
}

function disableStylesheet(node) {
  node.media = 'none';
}</code>

注意：

• 您可以使用getElementById、querySelector 定位特定CSS 文件，或其他選擇器。
• 避免使用非標準連結停用屬性。設定 HTMLLinkElement#disabled 仍然是可以接受的。
• 這些方法允許平滑的樣式交換，而不會影響可能由 JavaScript 動態設定樣式的頁面元素。

以上是如何在不重新載入頁面的情況下動態交換 CSS 檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！