如何使用 JavaScript 修改全域 CSS 值：綜合指南

使用JavaScript 修改全域CSS 值

問題概述

問題概述

操作CSS 樣式時使用Java元素時，可能會無意中變更內聯樣式值，從而覆寫全域CSS 宣告。這可能會導致不一致的行為和不正確的結果。

解決方案

要修改全域 CSS 值，請使用 document.styleSheets API。此 API 提供對 StyleSheetList 的訪問，其中包含文件中的所有 CSS 樣式表。透過迭代此列表，您可以識別所需的樣式表並修改其規則。

實作

1. 要操作給定元素ID 的全域CSS 值，請依照下列步驟操作：
2. 取得元素的樣式表：使用document.getElementById(id) 檢索HTML 元素，使用element.styleSheets 存取其樣式表。
3. 辨識規則： 使用 for 或 forEach 迴圈遍歷樣式表，以尋找包含元素樣式規則的樣式表。
4. 修改規則： 使用 cssRules 或 Rules 屬性（取決於瀏覽器）存取規則陣列。然後，透過將其 selectorText 屬性與元素的 ID 進行配對來尋找 CSS 規則。

設定新值： 辨識規則後，將其 value 屬性設定為所需的 CSS 值。

範例程式碼

<code class="javascript">// Get the element
const element = document.getElementById('container');

// Iterate through stylesheets
for (let i = 0; i < element.styleSheets.length; i++) {
  // Access the CSS rules
  const cssRules = element.styleSheets[i].cssRules;

  // Find the rule matching the element's ID
  for (let j = 0; j < cssRules.length; j++) {
    if (cssRules[j].selectorText === '#container') {
      // Change the background color
      cssRules[j].style.backgroundColor = 'red';
      break;
    }
  }
}</code>

以下程式碼示範如何變更 ID 為「container」的元素的背景顏色：

以上是如何使用 JavaScript 修改全域 CSS 值：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！