如何使用 JavaScript 將 CSS 動態注入我的網頁？

使用 JavaScript 動態注入 CSS

動態操作網頁的樣式可以大幅增強使用者體驗。 JavaScript 透過動態新增或修改 CSS 規則提供了實現此目的的強大方法。讓我們探索如何使用 JavaScript 將 CSS 規則合併到網頁中。

建立新樣式節點並將其新增至文件是一種簡單的方法。 JavaScript 允許您以程式設計方式將 CSS 規則定義為文本，然後附加新的

例如，考慮以下 JavaScript 程式碼：

<code class="javascript">// Define your CSS rules as text
var styles = `
    .qwebirc-qui .ircwindow div { 
        font-family: Georgia,Cambria,"Times New Roman",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 node for the CSS rules
var styleSheet = document.createElement("style");
styleSheet.textContent = styles;

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

此程式碼片段在 styles 變數中定義 CSS 規則。隨後，它創建了一種新的

透過將此程式碼合併到您的 JavaScript 中，您可以動態添加 CSS 規則來自訂網頁的樣式，為您的使用者創建更具吸引力和客製化的體驗。

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