麦子学院 2018-04-18 15:12
HTML5 data-*自定义属性详解
回复:0 查看:2764
本文和大家分享的主要是HTML5 data-*
自定义属性相关内容，使用
用data-
作为前缀可以用来设置我么需要的自定义数据属性，下面给大家介绍下具体操作，一起来看看吧，希望对大家
学习前端开发有所帮助。
使用此属性可以存放一些我们所需要的数据，代码如下:
< a href = "javascript:" data-url = "softwhy.com" data-webname = "
蚂蚁部落
" >
蚂蚁部落
</ a >
上面代码中，以data-
为前缀就是自定义数据属性，属性值就是存放的数据。
浏览器兼容:
（1
）
.IE8
和
IE8
以上浏览器支持此属性。
（2
）
.
谷歌浏览器支持此属性。
（3
）
.
火狐浏览器支持此属性。
（4
）
.opera
浏览器支持此属性。
（5
）
.safria
浏览器支持此属性。
命名规则:
（1
）
.
数据属性要以
data-
开头。
（2
）
.
属性名中的字符都是小写，并且在前缀
"data-"
之后必须有至少一个字符。
（3
）
.
属性值可以是任意字符串。
可以利用自定义属性进行css
匹配和相关
javascript
操作。
使用自定义属性作为选择器代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>
蚂蚁部落
</title>
<style type="text/css">
a {
display:block;
width:100px;
height:50px;
margin:10px;
text-align:center;
line-height:50px;
background:#ccc;
}
a[data-webname="
蚂蚁部落
"] {
color:red;
}
</style>
</head>
<body>
<a href="javascript:" data-webname="
蚂蚁部落
">
蚂蚁部落
</a>
<a href="javascript:" data-webname="antzone">softwhy.com</a>
</body>
</html>
上面的代码就可以利用自定义属性进行匹配，设置元素的样式。