如何通过javascript/jQuery从CSS类中获取样式属性？

Question

如何通过jQuery从CSS类访问属性？我有一个CSS类,如:

.highlight { 
    color: red; 
}

我需要在对象上做一个颜色动画:

$(this).animate({
    color: [color of highlight class]
}, 750);

所以我可以red改为blue(在CSS中),我的动画将按照我的CSS工作.

一种方法是在highlight类中放置一个不可见的元素,然后获取要在动画中使用的元素的颜色,但我想这是一个非常非常糟糕的做法.

有什么建议？

Answer 1

我写了一个小函数遍历文档中的样式表,寻找匹配的选择器,然后是样式.

有一点需要注意,这只适用于使用样式标记定义的样式表或来自同一域的外部工作表.

如果纸张已知,您可以将其传递出去,并且不必查看多张纸(更快,如果您有冲突规则,则更准确).

我只在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) {

现在它将检查分组规则中的任何选择器是否匹配.