如何使用 JavaScript 動態新增 CSS 樣式？

使用 JavaScript 合併 CSS

JavaScript 提供了一個強大的機制，可以將 CSS 規則動態新增至文件。此功能使開發人員能夠更改網頁的視覺外觀，而無需修改 HTML 標記。

新增自訂樣式

最簡單的方法是建立一個新的樣式節點並將其附加到文件的頭部：

<code class="javascript">// Define your custom CSS as text
var styles = `
    .my-class {
        color: red;
        font-weight: bold;
    }
`;

// Create a new style element and set its text content
var styleSheet = document.createElement("style");
styleSheet.textContent = styles;

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

透過這種方法，您的自訂CSS 規則將套用至文檔，動態增強其視覺呈現。

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