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

使用 JavaScript 動態新增 CSS 規則

使用 JavaScript 將自訂樣式合併到網頁中提供了靈活性和適應性。常見的需求是為頁面動態新增 CSS 規則。讓我們探討如何實現這一目標。

使用JavaScript 添加動態CSS 規則

要使用JavaScript 將CSS 規則添加到文檔，您可以利用以下方法：

// Dynamically Create a New Style Element
var styleElement = document.createElement("style");

// Inject CSS Text as Content
styleElement.textContent = ".my-new-style { color: blue; }";

// Append the Style Element to the Document's Header
document.head.appendChild(styleElement);

在在上面的範例中，我們建立一個新的樣式元素，為其指派適當的CSS 規則作為文本，並將其附加到文件的head 元素。

CSS 文字範例

如果要加入 CSS 文字字串，可以使用以下內容：

var styles = `.my-new-style { color: blue; }`;
var styleElement = document.createElement("style");
styleElement.textContent = styles;
document.head.appendChild(styleElement);

結論

使用JavaScript動態添加CSS規則提供了能力以程式設計方式操縱網頁的外觀和樣式，增強其靈活性和使用者體驗。

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