如何使用 JavaScript/jQuery 動態擷取 CSS 類別樣式
在 Web 開發中，樣式通常是使用 CSS 類別定義的。若要基於 CSS 類別修改元素的樣式，您可以利用 JavaScript 或 jQuery。
使用 jQuery 檢索樣式
jQuery 提供了一個方便的方法來存取樣式屬性CSS類別：
$(element).css(styleAttribute);
例如，透過該類別取得元素的顏色"highlight":
var color = $(element).css("color");使用函數的替代方法
另一種方法是使用遍歷文件中樣式表的函數：
function getStyleRuleValue(style, selector) {
// Iterate through style sheets
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
// Iterate through rules in the current sheet
for (var j = 0; j < sheet.cssRules.length; j++) {
var rule = sheet.cssRules[j];
// Check if the rule matches the selector
if (rule.selectorText.includes(selector)) {
// Return the requested style
return rule.style[style];
}
}
}
// No matching rule found
return null;
}用法：
var color = getStyleRuleValue("color", ".highlight");此功能可以從內聯和外部樣式表中檢索樣式，但僅限於同域外部表。
範例用法
考慮以下CSS 類別：
.highlight {
color: red;
}對物件的顏色進行動畫處理以符合「突出顯示」 class:
$(this).animate({
color: getStyleRuleValue("color", ".highlight")
}, 750);此方法可讓您動態變更CSS顏色並使動畫響應這些更改，從而提供無縫且一致的用戶體驗。
以上是如何使用 JavaScript 或 jQuery 動態檢索 CSS 類別樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
