如何通过 jQuery 访问 CSS 类的属性? 我有一个 CSS 类:
.highlight {
color: red;
}
我需要在一个对象上做一个彩色动画:
$(this).animate({
color: [color of highlight class]
}, 750);
这样我就可以从 red
更改为 blue
(在 CSS 中),我的动画将根据我的 CSS 工作。
一种方法是用 highlight
类放置一个不可见的元素,然后获取要在动画中使用的元素的颜色,但我想这是一种非常非常糟糕的做法。
有什么建议吗?
最佳答案
我写了一个小函数来遍历文档中的样式表,寻找匹配的选择器,然后设置样式。
有一个警告,这仅适用于使用样式标签定义的样式表,或来自同一域的外部表。
如果工作表是已知的,您可以将其传递进来,这样您就不必查看多个工作表(速度更快,如果您有冲突规则,它会更准确)。
我只在 jsFiddle 上测试了一些弱测试用例,请告诉我这是否适合你。
function getStyleRuleValue(style, selector, sheet) {
var sheets = typeof sheet !== 'undefined' ? [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;
}
示例用法:
var color = getStyleRuleValue('color', '.foo'); // searches all sheets for the first .foo rule and returns the set color style.
var color = getStyleRuleValue('color', '.foo', document.styleSheets[2]);
编辑:
我忽略了考虑分组规则。我将选择器检查更改为:
if (rule.selectorText.split(',').indexOf(selector) !== -1) {
现在它将检查分组规则中的任何选择器是否匹配。
关于javascript - 如何通过 javascript/jQuery 从 CSS 类获取样式属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16965515/