点击按钮修改背景颜色及节点操作隔行变色案例

<input type="button" value="点击设置" id="dtn"/>
<div id="dd">
<span>这是一个span</span>
<p>这是一个p</p>
<span>这是一个span</span>
<p>这是一个p</p>
<span>这是一个span</span>
<p>这是一个p</p>
<a href="#">百度</a>
</div>
<script src="commer.js"></script>
<script>
ver("dtn").onclick = function () {
//先获取div
var pObj = ver("dd");
//获取每个子节点
var nodes = pObj.childNodes;
//遍历循环所有子节点
for (var i = 0; i < nodes.length; i++) {
//判断这个子节点是不是P标签
if (nodes[i].nodeType==1&&nodes[i].nodeName=="P") {
nodes[i].style.backgroundColor = "red";
}

}
};



<!--案例:节点案例操作隔行变色-->
<input type="button" value="变色" id="inp"/>
<ul id="inn">
<li>红烧茄子</li>
<li>海带炖猪蹄</li>
<li>佛跳墙</li>
<li>蚂蚁上树</li>
<li>粉蒸肉</li>
<li>东坡肉</li>
<li>大盘鸡</li>
</ul>
<script src="commer.js"></script>
<script>

ver("inp").onclick=function () {
var count=0;//记录有多少个li
var inObj=ver("inn").childNodes;
for(var i=0;i<inObj.length;i++){
if(inObj[i].nodeType==1&&inObj[i].nodeName=="LI"){
inObj[i].style.backgroundColor=count%2==0?"red":"yellow";
count++;//7个
}
}
};
</script>

猜你喜欢

转载自www.cnblogs.com/lujieting/p/10046514.html