是否可以获取与元素关联的css类的所有属性?
例如
.hightligh {
font-weight: bold;
border: 1px solid red;
padding-top:10px;
}
让我们说css类“hightlight”被分配给div元素
<div class='highlight'></div>
现在使用JavaScript,我需要遍历与div元素相关联的css类“highlight”的所有样式属性。 基本上,我想将它视为一个JavaScript对象,其属性可以使用迭代器或循环来访问。
提前致谢
答案 0 :(得分:0)
使用普通的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。
答案 1 :(得分:0)
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]
答案 2 :(得分:0)
这并不像你想象的那样有用,你必须记住继承和顺序,以及直接应用于元素的样式。但是你可以在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'
}