欢迎加入QQ讨论群258996829
麦子学院 头像
苹果6袋
6
麦子学院

HTML5 data-*自定义属性详解

发布时间:2018-04-18 15:12  回复:0  查看:2530   最后回复:2018-04-18 15:12  
本文和大家分享的主要是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>
  上面的代码就可以利用自定义属性进行匹配,设置元素的样式。

您还未登录,请先登录

热门帖子

最新帖子