zoukankan      html  css  js  c++  java
  • 点击按钮修改背景颜色及节点操作隔行变色案例

    <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>
  • 相关阅读:
    【洛谷P3628】特别行动队
    【洛谷P3233】世界树
    【BZOJ1597】土地购买
    【洛谷P4068】数字配对
    【洛谷P3899】谈笑风生
    【BZOJ2726】任务安排
    【洛谷P6186】[NOI Online 提高组] 冒泡排序
    【洛谷P3369】【模板】普通平衡树
    【UOJ#8】Quine
    标准 插入flash
  • 原文地址:https://www.cnblogs.com/lujieting/p/10046514.html
Copyright © 2011-2022 走看看