自定义属性的应用_属性操作中自定义属性的作用-CSDN博客

本文链接：https://blog.csdn.net/qq_31406573/article/details/51170107

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>自定义属性的应用</title>
   <style type="text/css">
       li{
           list-style: none;
           width: 114px;
           height: 140px;
           background-color: red;
           margin-right: 20px;
           border: 1px solid #000;
           display: inline-block;
       }
   </style>
   <script type="text/javascript">
       window.onload = function(){
           var aLi = document.getElementsByTagName("li");
           var onOff = true; //只能控制一组，会产生干扰，会发生开关不起作用的假象（第一次点击一个方块颜色发生变化，第二次点击其他方块的时候颜色没有产生变化）。但是我们有三组。要使用自定义属性给每组都加上自定义的“开关属性”。这样就可以互不干扰。

           for(var i = 0; i < aLi.length;i++)
           {
               aLi[i].onclick = function(){
                   if(onOff)
                   {
                       this.style.backgroundColor = "yellow";
                       onOff = false;
                   }
                   else
                   {
                       this.style.backgroundColor = "red";
                       onOff = true;
                   }
               }
           }
       };
   </script>
</head>
<body>
   <ul>
       <li></li>
       <li></li>
       <li></li>
   </ul>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>自定义属性的应用</title>
   <style type="text/css">
       li{
           list-style: none;
           width: 114px;
           height: 140px;
           background-color: red;
           margin-right: 20px;
           border: 1px solid #000;
           display: inline-block;
       }
   </style>
   <script type="text/javascript">
       window.onload = function(){
           var aLi = document.getElementsByTagName("li");

           for(var i = 0; i < aLi.length;i++)
           {
               aLi[i].onOff = true;   //给每个Li都添加了自定义属性onOff
               aLi[i].onclick = function(){
                   if(this.onOff)
                   {
                       this.style.backgroundColor = "yellow";
                       this.onOff = false;
                   }
                   else
                   {
                       this.style.backgroundColor = "red";
                       this.onOff = true;
                   }
               }
           }
       };
   </script>
</head>
<body>
   <ul>
       <li></li>
       <li></li>
       <li></li>
   </ul>
</body>
</html>