HTML5 data-*自定義屬性簡單介紹

我們可以使用data-作為字首來設定我們所需要的自定義資料屬性。

使用此屬性可以存放一些我們所需要的資料，代碼如下:

<code>&lt;</code><code>a</code> <code>href</code><code>=</code><code>"javascript:"</code> <code>data-url</code><code>=</code><code>"softwhy.com"</code> <code>data-webname</code><code>=</code><code>"螞蟻部落"</code><code>&gt;螞蟻部落&lt;/</code><code>a</code><code>&gt;</code>

上面代碼中，以data-為字首就是自定義資料屬性，屬性值就是存放的資料。

浏覽器相容:

（1）.IE8和IE8以上浏覽器支援此屬性。

（2）.谷歌浏覽器支援此屬性。

（3）.火狐浏覽器支援此屬性。

（4）.opera浏覽器支援此屬性。

（5）.safria浏覽器支援此屬性。

命名規則:

（1）.資料屬性要以data-開頭。

（2）.屬性名中的字元都是小寫，并且在字首 "data-" 之後必須有至少一個字元。

（3）.屬性值可以是任意字元串。

可以利用自定義屬性進行css比對和相關javascript操作。

使用自定義屬性作為選擇器代碼如下:

<code>&lt;!doctype html&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;螞蟻部落&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>&gt;</code>

<code>a {</code>

<code>  </code><code>display:block;</code>

<code>  </code><code>width:100px;</code>

<code>  </code><code>height:50px;</code>

<code>  </code><code>margin:10px;</code>

<code>  </code><code>text-align:center;</code>

<code>  </code><code>line-height:50px;</code>

<code>  </code><code>background:#ccc;</code>

<code>}</code>

<code>a[data-webname="螞蟻部落"] {</code>

<code>  </code><code>color:red;</code>

<code>&lt;/</code><code>style</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>a</code> <code>href</code><code>=</code><code>"javascript:"</code> <code>data-webname</code><code>=</code><code>"螞蟻部落"</code><code>&gt;螞蟻部落&lt;/</code><code>a</code><code>&gt;</code>

<code>&lt;</code><code>a</code> <code>href</code><code>=</code><code>"javascript:"</code> <code>data-webname</code><code>=</code><code>"antzone"</code><code>&gt;softwhy.com&lt;/</code><code>a</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

上面的代碼就可以利用自定義屬性進行比對，設定元素的樣式。

原文釋出時間為：2017-3-2

本文作者：admin

本文來自雲栖社群合作夥伴“螞蟻部落”，了解相關資訊可以關注螞蟻部落