点击ul/li改变背景颜色

最新推荐文章于 2023-03-27 17:35:02 发布

王的博客

最新推荐文章于 2023-03-27 17:35:02 发布

阅读量3k

点赞数 2

分类专栏：开发文章标签： javascript

本文链接：https://blog.csdn.net/Wang_WY/article/details/107234125

版权

开发专栏收录该内容

91 篇文章 4 订阅

订阅专栏

使用一个简单的for循环解决不同的li分别设置不同背景颜色

1.代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
      <title>Change.html</title>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <style>
        body li{
              list-style-type: none;
        }
     </style>
 </head>
 <body>
 <li onclick='setbgColor(this.id)' id=a><small>第一行文字</small></li><br>
 <li onclick='setbgColor(this.id)' id=b><small>第二行文字</small></li><br>
 <li onclick='setbgColor(this.id)' id=c><small>第三行文字</small></li><br>
 <script type=text/javascript>
     function setbgColor(x)
     {
         d=document.getElementsByTagName('li')
         for(p=d.length;p--;){
             if(d[p].id=='a'){d[p].style.backgroundColor='#AA0000'}
             else if(d[p].id=='b'){d[p].style.backgroundColor='#AABB00'}
             else{d[p].style.backgroundColor='#AABBCC'} 
         } 
     }
</script>
</body>
</html>

2.效果图

王的博客

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
点击ul/li改变背景颜色

一个简单的for循环就解决不同的li分别设置不同背景颜色1.代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Change.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8
复制链接

扫一扫