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

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落