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