Javascript 如何通过CSS类名检索CSS样式对象？

是否可以获取与元素关联的css类的所有属性？
e、 g

假设css类“hightlight”被分配给div元素

<div class='highlight'></div>

现在使用JavaScript，我需要遍历与div元素相关联的css类“highlight”的所有样式属性。 基本上，我希望将其视为一个JavaScript对象，可以使用迭代器或for循环访问其属性

---

提前感谢

使用普通的DOM功能构建这样的东西相对容易。以下是一个例子：

document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};

document.getElementsByClassName=函数（cl）{
var retnode=[]；
var myclass=newregexp（'\\b'+cl+'\\b'）；
var elem=this.getElementsByTagName（'*'）；
对于（变量i=0；i

---

但是，与其自己滚动，不如更好地利用时间检查jQuery选择器。这是一个很好的开始。下面是使用jQuery进行特定查询的步骤

Firefox和chrome已经

document.getElementsByClassName("whatever")

对于IE，您必须遍历每个ID并检查该类是否是您想要使用的

var elems = document.getElementsByTagName("*");
        for(var i = 0; i < elems.length;i++)
            if(elems[i].className == nameRequired)
                return elems[i]

var elems=document.getElementsByTagName（“*”）；
对于（变量i=0；i

这并不像您想象的那么有用，您必须记住继承和顺序，以及直接应用于元素的样式。但在IE7+和此后的大多数其他浏览器中，您可以通过选择器返回所有css规则：

function getRules(rx){
    var A= [], tem, R= this.cssRules || this.rules, L= R.length;
    if(typeof rx== 'string') rx= new RegExp('\\b'+rx+'(,|$)', 'i');
    while(L){
        tem= R[--L] || '';
        if(tem.selectorText && rx.test(tem.selectorText)){
            A[A.length]= tem.style.cssText || '';
        }
    }
    return A;
}
function getAllRules(sel){
    var A= [], S= document.styleSheets, L= S.length, tem;
    while(L){
        tem= getRules.call(S[--L], sel);
        while(tem.length){
            A[A.length]= tem.shift();
        }
    }
    A= A.join(';').split(/;+\s*/);
    return A;
}



getAllRules('body')// element selector
getAllRules('#p_opts')//id selector
getAllRules('.emhooCss')// class selector
getAllRules('#ul_tree h4 span')// descendent selector
getAllRules(/\b(body|div|p)\b/i)//rx for multiple selectors

制作对象需要拆分数组的各个部分

function Cssruler(sel){
    var R= getAllRules(sel), L= R.length, tem;
    while(L){
        tem= R[L--] || '';
        tem= tem.split(/\s*\:\s*/);
        if(tem.length== 2) this[tem[0]]= tem[1];
    }
    this.selector= sel;
}

var R=新Cssruler（'主体'）

---

你为什么要这么做？如果您想知道这一点，那么只需检查firebug中的元素。如果您正在寻找通过样式表设置的值，那么就没有快速修复（据我所知）来获取这些样式。然而，这里有一个获取特定元素的计算样式（Firebug使用类似的东西）的片段。对于像这样简单的东西，没有必要建议一个完整的库。@user551841这就是为什么我支持jQuery。

document.querySelectorAll

在IE8中受支持。它有不同的功能，但可以使用它（jQuery使用它）按类名获取项。这并不能回答问题。Chir希望遍历与类对应的div的样式属性。

function Cssruler(sel){
    var R= getAllRules(sel), L= R.length, tem;
    while(L){
        tem= R[L--] || '';
        tem= tem.split(/\s*\:\s*/);
        if(tem.length== 2) this[tem[0]]= tem[1];
    }
    this.selector= sel;
}

R contains an object like this:

{
    background: 'none repeat scroll 0% 0% rgb(250, 250, 250)',
    background-color: 'black',
    background-image: 'url("starynte.gif")',
    color: 'black',
    left: '0pt',
    margin: '0pt',
    padding-top: '2.5em',
    right: '0pt',
    selector: 'body',
    width: 'auto'
}