如何使用 JavaScript 動態新增 CSS 規則？

使用JavaScript 動態新增CSS 到您的頁面

在Web 開發中，動態修改頁面樣式的能力對於建立互動至關重要和響應式用戶體驗。實現這一目標的關鍵技術是使用 JavaScript 動態添加 CSS 規則。

為了實現這一目標，有多種方法可用。最直接的方法之一是建立一個新的樣式節點並將其附加到文件中。它的工作原理如下：

建立並附加新樣式節點：

<code class="javascript">// Define your CSS rules as a string
var styles = `
    .qwebirc-qui .ircwindow div { 
        font-family: Georgia,Cambria,&quot;Times New Roman&quot;,Times,serif;
        margin: 26px auto 0 auto;
        max-width: 650px;
    }
    .qwebirc-qui .lines {
        font-size: 18px;
        line-height: 1.58;
        letter-spacing: -.004em;
    }
    
    .qwebirc-qui .nicklist a {
        margin: 6px;
    }
`;

// Create a new style element
var styleSheet = document.createElement("style");

// Set the content of the style element to your CSS rules
styleSheet.textContent = styles;

// Append the style element to the document head
document.head.appendChild(styleSheet);</code>

透過使用此方法，您可以隨時在頁面動態新增CSS 規則頁面執行期間的點，可讓您按需修改頁面樣式並建立高度互動和回應靈敏的Web 體驗。

以上是如何使用 JavaScript 動態新增 CSS 規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！