<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").οnclick=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>

轉載于:https://www.cnblogs.com/lujieting/p/10046514.html

總結

以上是生活随笔為你收集整理的点击按钮修改背景颜色及节点操作隔行变色案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。