首頁 >web前端 >css教學 >如何使用 JavaScript 或 jQuery 存取 CSS 類別樣式屬性?

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

Barbara Streisand
Barbara Streisand原創
2024-12-09 06:08:14981瀏覽

How Can I Access CSS Class Style Attributes Using JavaScript or jQuery?

使用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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn