JavaScript 如何動態改變使用者互動的 CSS 規則集？-css教學-PHP中文網

JavaScript 如何動態改變使用者互動的 CSS 規則集？

Mary-Kate Olsen

發布： 2024-12-20 07:30:10

原創

820 人瀏覽過

How Can JavaScript Dynamically Alter CSS Rulesets on User Interaction?

使用 JavaScript 動態修改 CSS 規則集

透過 JavaScript 動態自訂網頁美觀是一項強大的技術。其中一種自訂是在發生特定事件（例如使用者點擊）時更改 CSS 規則集。

考慮以下場景：您有一個網頁，其中多個元素共用一個公用類別。您希望在小部件啟動時修改此規則集，以影響具有該類別的所有元素。

要達到此目的，請依照下列步驟操作：

擷取樣式表物件：使用 document.styleSheets 取得樣式表物件。
存取規則集：在樣式表中找到要修改的規則集。
更新規則集：使用規則集的cssText 屬性更新其樣式.

這裡是一個例子：

const widget = document.getElementById("my-widget");

widget.addEventListener("click", function() {
  const stylesheet = document.styleSheets[0];  // Assuming the stylesheet is the first one
  const ruleSet = stylesheet.cssRules[1];  // Assuming the rule-set is the second one
  ruleSet.cssText = "color: red; font-size: 16px;";
});

登入後複製

注意修改CSS動態規則集可能很複雜，因為每個瀏覽器以不同的方式實作DOM 方法。然而，透過仔細的實驗，您可以在 Firefox、IE 和 Chrome 等瀏覽器中實現所需的自訂。

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