如何在不重新載入的情況下動態更改網頁上的 CSS 樣式？-js教程-PHP中文網

如何在不重新載入的情況下動態更改網頁上的 CSS 樣式？

Linda Hamilton

發布： 2024-10-30 10:36:03

原創

396 人瀏覽過

How can I dynamically change CSS styles on a web page without reloading?

動態交換 CSS 樣式

您想要動態變更網頁的 CSS 樣式，將一個樣式表取代為另一個樣式表。在普通 JavaScript 或 jQuery 中，您可以透過包含所有必要的樣式表，然後選擇性地啟用或停用它們來實現此目的。

選項1：切換rel=alternate

包含樣式表使用「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：設定和切換禁用

包含帶有“rel=stylesheet”的樣式表和“class=alternate”，並切換其“禁用”屬性：

<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;
}</code>

登入後複製

選項3：切換media=none

包含帶有「的樣式表media=none」並切換其「media」屬性：

<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 或其他方法選擇樣式表節點。如果需要，可以使用 jQuery 進行進一步處理。這種方法可讓您即時切換 CSS 樣式，而無需重新載入頁面。

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