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

如何通过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/