关闭

样式获取和遍历

297人阅读 评论(0) 收藏 举报

1.访问元素样式

1.cssText:访问到style中的css代码
2.length:css属性的数量
3.getPropertyValue(propertyName);()
4.item(index)
5.removeProperty(propertyName)
6.setProperty(propertyName,value,priority);
var btn=document.getElementById("btn");
for(var i=0;i<btn.style.length;i++){
var prop=btn.style[i];
val value=btn.style.getPropertyValue(prop);
console.log(prop+"=:"+value);
console.log("item:"+btn.style.item(i));
}
结果:float=:left color=:rgb(255, 0, 0)
 text-align=:center
      item:float item:color item:text-align

2.计算样式

1.var v=document.defaultView.getComputedStyle(btn,null);
console.log("v=========="+v.color);
2..ie8:
var v=btn.currentStyle;
console.log("v=========="+v.color);

3.遍历

NodeIterator
document.createNodeIterator(root,whatTosow(访问节点字节码 eg:NodeFilter.SHOW_ALL,NodeFilter.SHOW_ELEMENT,NodeFilter.SHOW_ATTRIBUTE等),filter(对象),false)
var filter=function(node){
return node.tagName.toLowerCase()=="p"?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP
}
<div id="div1">
<p>heelo</p>
<ul>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
</div>
var div=document.getElementById("div1");
var iterator=document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);
var node=iterator.nextNode();
while(node!=null){
console.log(node.tagName+"  ");
node=iterator.nextNode();
}
DIV


 P


 UL LI LI LI LI
var filter=function(node){
return node.tagName.toLowerCase()=="p"?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP
}


 var iterator=document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,filter,false);
var node=iterator.nextNode();
while(node!=null){
console.log(node.tagName+"  ");
node=iterator.nextNode();
}
P
 



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2929次
    • 积分:137
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:3篇
    • 译文:3篇
    • 评论:0条