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

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

Barbara Streisand
發布: 2024-12-09 06:08:14
原創
1044 人瀏覽過

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板