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

使用 Javascript 合併 CSS

CSS 樣式表對於自訂網頁外觀至關重要。但是，如果您想根據特定條件或使用者互動動態修改 CSS，該怎麼辦？這就是 Javascript 發揮作用的地方。

透過 Javascript 新增 CSS 規則

透過 Javascript 新增 CSS 規則的主要方法是建立一個新的樣式節點並將其新增至文件。這涉及以下步驟：

1. 建立樣式節點：建立 HTML
2. 新增樣式節點： 將建立的樣式節點附加到 中。使用document.head.appendChild(styleSheet).

範例：

// CSS rules as text
var styles = `
    .my-custom-class {
        color: red;
        font-weight: bold;
    }
`;

// Create a style node
var styleSheet = document.createElement("style");
styleSheet.textContent = styles;

// Add the style node to the head
document.head.appendChild(styleSheet);

透過此方法，您可以動態修改CSS 樣式並回應使用者操作或應用程式邏輯變更。

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