Question

是否可以获取与元素关联的css类的所有属性？
例如

.hightligh {
   font-weight: bold;
   border: 1px solid red;
   padding-top:10px;
}

让我们说css类“hightlight”被分配给div元素

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

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

提前致谢

Answer 1

使用普通的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;
};

然而，不是滚动自己，而是更好地利用你的时间来检查jQuery选择器。 Here是一个很好的起点。以下是使用jQuery的特定查询的the exact answer。

Answer 2

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]

Answer 3

这并不像你想象的那样有用，你必须记住继承和顺序，以及直接应用于元素的样式。但是你可以在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（'body'）

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'
}

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

3 个答案: