如何使用 JavaScript 或 jQuery 存取 CSS 類別樣式屬性？

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

處理CSS 動畫時，存取元素的樣式屬性可能具有挑戰性使用JavaScript 或jQuery 從CSS 類別中取得。但是，有一些有效的方法可以檢索這些屬性。

使用自訂函數擷取樣式屬性

一種方法是建立一個遍歷文件樣式表的自訂 JavaScript 函數尋找符合的 CSS 選擇器和樣式。以下是一個範例函數：

function getStyleRuleValue(style, selector, sheet) {
  var sheets = sheet ? [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;
}

例如，取得.highlight 類別的顏色屬性：

var color = getStyleRuleValue('color', '.highlight');

注意： 此函數假設樣式表是內聯定義的或與目前文件具有相同的網域。

應用動畫

使用檢索到的樣式屬性，您可以將其應用到您的動畫中：

$(this).animate({
    color: color // Retrieved color attribute
}, 750);

透過將CSS類別從紅色更新為藍色，動畫將相應調整，對齊具有更新的CSS 顏色樣式。

以上是如何使用 JavaScript 或 jQuery 存取 CSS 類別樣式屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！