JS实现当点击子元素让其父元素换色

寸寸时光

于 2017-08-31 14:23:29 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/wang17866603359/article/details/77746051

本文详细介绍了如何通过JavaScript实现一个功能，当用户点击子元素时，其父元素的背景颜色会发生变化。这个过程涉及到事件冒泡、DOM操作以及样式修改等JavaScript基础知识，对于提升网页交互体验具有实用价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
       <ul>
              <li>我要换色
                    <button onclick="aa(this)">点我点我</button>
              </li>
       </ul>

</body>

<script>

               var aaa=true;

               function  aa(w) {
                  aaa?w.parentNode.style.color = 'red':w.parentNode.style.color = 'blue';
                  aaa=!aaa;
               }


</script>

</html>``

运用三目运算目来进行判断，通过添加变量来切换点击实现的效果。
在JS 中parentNode 属性可返回某节点的父节点。
如果指定的节点没有父节点则返回 null 。
由于在调用函数的时候是this 参数是w，所以w是指当前的节点。