关于元素属性

一、元素的属性用来控制标记内容的显示。

二、一个元素可以使用多个属性。

三、布尔属性

  布尔属性不需要设置属性值。只需要讲属性名添加到元素中即可。例如     

 <!DOCTYPE html>   
 <input disabled>

  布尔属性指定一个空字符串或者属性名称字符串作为其值也能达到同样的效果。

 <input type="text" disabled="disabled">
 <br>
 <input type="text" disabled="">

四、自定义属性

  用户可以自定属性,属性名必须以data-开头。可以同dataset(HTML中的全局属性)获取和设置属性值。例如

  <div id="div1" data-id="123">        
  </div>
  <script type="text/javascript">
        var d=document.getElementById("div1");
        console.log(d.id);//div1
        console.log(d.dataset.id);//123
        d.dataset.id=456;
        console.log(d.dataset.id);//456
  </script> 

  注意:使用dataset时属性名不需要data-;

       属性名中含有连字符时,采用小驼峰标记法例如,属性名称 data-abc-def 与键值 abcDef 相对应。

      此外,我们可以基于data属性值对相应的元素设置CSS样式,例如为上面的元素设置样式:

1 <style type="text/css">
2         [data-id]{
3             width: 100px;
4             height:200px;
5             background: red;
6         }
7 </style>

 

 

 

    

  

 

posted @ 2018-01-18 18:54  Skd一路花开  阅读(387)  评论(0编辑  收藏  举报