JS 节点的方式实现隔行变色

最新推荐文章于 2023-08-26 11:04:23 发布

夏沐_lk

最新推荐文章于 2023-08-26 11:04:23 发布

阅读量472

点赞数 1

分类专栏： js代码文章标签： JS 节点获取

本文链接：https://blog.csdn.net/guanmao4322/article/details/86567448

版权

js代码专栏收录该内容

65 篇文章 0 订阅

订阅专栏

在HTML中，节点的个数指的是标签、文本的总个数，所以在以下代码中：标签<ul>中，共还有17个节点，但是只有8个标签，但是需要的是标签的背景变色，因此不可以使用【i】作为标签的角标。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="变色" id="btn"/>
<ul id="uu">
  <li>爆炒助教</li>
  <li>油炸班主任</li>
  <li>清蒸小苏</li>
  <li>红烧班长</li>
  <li>红烧肉</li>
  <li>糖醋排骨</li>
  <li>凉拌秋葵</li>
  <li>鱼香胡萝卜丝</li>
</ul>
<script src="common.js"></script>
<script>
  //隔行变色--li
  my$("btn").onclick = function () {
    var count=0;//记录有多少个li
    //获取ul中所有的子节点
    var nodes = my$("uu").childNodes;
    for (var i = 0; i < nodes.length; i++) {
      //判断这个节点是不是li标签
      if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {
        nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
        count++;//8个
        //nodes[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
      }
    }
  };

</script>
</body>
</html>

common.js

/**
 * 根据id属性的值,返回对应的标签元素
 * @param id id属性的值,string类型的
 * @returns {Element} 元素对象
 */
function my$(id) {
    return document.getElementById(id);
}

夏沐_lk

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS 节点的方式实现隔行变色

在HTML中，节点的个数指的是标签、文本的总个数，所以在以下代码中：标签<ul>中，共还有17个节点，但是只有8个标签，但是需要的是标签的背景变色，因此不可以使用【i】作为标签的角标。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl...
复制链接

扫一扫