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

是否有可能获得与一个元素相关联的CSS类的所有属性？
例如如何通过CSS类名检索CSS样式对象？

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

让说的CSS类“hightlight”被分配给div元素

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

现在使用JavaScript，我需要通过CSS类“亮点”与div元素相关联的所有样式属性来遍历。基本上，我想把它当作一个JavaScript对象，其属性可以使用迭代器或for循环访问。

在此先感谢

来源

2011-02-27 Chir

为什么要这样做？如果你想知道这一点，那么只需检查萤火虫中的元素。 – CarneyCode 2011-02-27 05:29:08

如果您正在寻找通过样式表设置的值，那么没有快速修复（我知道）来获取这些样式。但是，这里有一个代码片段，它提取了特定元素的计算样式（Firebug使用类似这样的东西）。 http://www.quirksmode.org/dom/getstyles.html#link7 – 2011-02-27 05:30:19

它相对容易建立类似的东西与普通的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是一个很好的开始。这里是the exact answer用于jQuery的特定查询。

来源

2011-02-27 05:30:05 t3rse

没有必要建议一个完全成熟的库，因为这个过于简单。 – AlanFoster 2011-02-27 05:32:54

@ user551841这就是为什么我点头向jQuery。 – t3rse 2011-02-27 05:33:56

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]

来源

2011-02-27 05:31:50 AlanFoster

IE8支持'document.querySelectorAll'。它有不同的功能，但可以使用它（jQuery使用它）通过类名获取项目。 – 2011-02-27 05:34:02

这不回答问题。 Chir想要迭代对应于该类的div的样式属性。 – ehsanul 2011-02-27 05:35:17

@Matt McDonald *感谢致谢。 – AlanFoster 2011-02-27 05:37:39

这是不是有用如你所想，你必须记住继承和顺序，以及直接应用于元素的样式。但是你可以通过自己的选择和大多数其他浏览器，因为再返回所有的CSS规则，在IE7 +：

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

来源

2011-02-27 06:11:35 kennebec

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

回答

相关问题