1. 程式人生 > >關於元素屬性

關於元素屬性

data屬性 bcd 全局 size eight 標記 span con html中

一、元素的屬性用來控制標記內容的顯示。

二、一個元素可以使用多個屬性。

三、布爾屬性

  布爾屬性不需要設置屬性值。只需要講屬性名添加到元素中即可。例如

 <!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>

  

關於元素屬性