HTML5 自定义data标签

来源：互联网发布：centos 关闭3306端口编辑：程序博客网时间：2024/05/31 19:51
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>HTML5 自定义data标签</title>    <style>          .ui_header {            background-color: black;            text-align: center;            color:white;            border:1px solid #000;          }      </style>  </head><body>    <div data-chb="header">          <h1>我是使用了data-chb自定义属性的div</h1>      </div>      <br/>      <div>          我没有使用data-chb自定义属性，该怎么展现就怎么展现；      </div>  </body></html> <script type="text/javascript">    window.onload=function(){      var elems = document.getElementsByTagName("div");      if(elems!=null&&elems.length>0){        var length = elems.length;        //遍历所有DIV控件        for(var i=0;i<length;i++){          var elem = elems[i];          //获取该控件的自定义属性          var customAttr = elem.dataset.chb;          //也可以通过如下方式获得自定义属性          //var customAttr = elem.dataset["chb"];          //如果是我们预先定义好的header值，表示需要处理          if(customAttr=="header"){            //添加样式            elem.setAttribute("class","ui_header");          }        }      }    }  </script>
0 0