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>
  • 相关阅读:
    mysql数据库中的锁
    HihoCoder
    旅游规划(双权连通图)
    单调栈的原理
    战争联盟(并查集)
    点赞狂魔(巧用STL容器事半功倍)
    这是二叉搜索树吗?
    好像是两种权的dijkstra
    pat--046.整除光棍(除法模拟)
    幸运数字 2
  • 原文地址:https://www.cnblogs.com/lujieting/p/10046514.html
Copyright © 2011-2022 走看看