如何使用 JavaScript 有效率地從類別中檢索 CSS 樣式屬性？

使用JavaScript/jQuery 從CSS 類別擷取樣式屬性

在JavaScript 中使用樣式動畫時，可能需要存取定義的屬性在CSS類中。當需要根據 CSS 更改動態更新動畫並確保其一致時，就會出現挑戰。

一種方法涉及使用分配給目標 CSS 類別的隱藏元素，提取其計算出的顏色，然後在動畫。然而，這種方法通常被認為效率低。

更強大的解決方案是遍歷與文件關聯的樣式表並搜尋相關的特定選擇器和樣式屬性。以下是執行此任務的函數的實作：

function getStyleRuleValue(style, selector, sheet) {
  var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
  for (var i = 0, l = sheets.length; i < l; i++) {
    var sheet = sheets[i];
    if (!sheet.cssRules) {
      continue;
    }
    for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
      var rule = sheet.cssRules[j];
      if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
        return rule.style[style];
      }
    }
  }
  return null;
}

範例用法：

var color = getStyleRuleValue('color', '.foo'); // searches all sheets for the first .foo rule and returns the set color style.

var color = getStyleRuleValue('color', '.foo', document.styleSheets[2]); // searches a specific stylesheet

此函數依賴於分割以逗號分隔的選擇器清單並檢查是否給定的選擇器是清單的一部分。它支援分組規則和來自同一網域的外部樣式表。

透過利用此功能，您可以根據 CSS 類屬性的變化動態調整樣式動畫，確保您的網站或應用程式保持美觀一致並回應使用者需求偏好。

以上是如何使用 JavaScript 有效率地從類別中檢索 CSS 樣式屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！