HTML5 data-*自定义属性简单介绍-阿里云开发者社区

开发者社区> 青衫无名> 正文

HTML5 data-*自定义属性简单介绍

简介:
+关注继续查看

我们可以使用data-作为前缀来设置我们所需要的自定义数据属性。

使用此属性可以存放一些我们所需要的数据,代码如下:

1
<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操作。

使用自定义属性作为选择器代码如下:


01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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>

上面的代码就可以利用自定义属性进行匹配,设置元素的样式。


原文发布时间为:2017-3-2

本文作者:admin

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

原文链接:HTML5 data-*自定义属性简单介绍

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
flex 1119错误 找不到属性 static 解决方法,编译选项中选中 不启用rsl
flex 1119错误 找不到属性 static 解决方法,编译选项中选中 不启用rsl
407 0
DataHub:流行的元数据架构介绍
时至今日,我们正生活在数据的黄金时代。当数据科学家加入数据驱动型公司时,他们希望找到一种数据发现工具(即数据目录),可以用来找出公司中存在哪些数据集,以及如何使用这些数据集来测试新假设和产生新见解。大多数数据科学家并不真正关心这个工具在幕后是如何工作的,只要它能使他们富有成效。
169 0
html5 canvas--1.canvas介绍
  从今天开始,我们将开始一个关于html5 canvas的系列课程。这个系列是我读《HTML5 Canvas:Native Interactivity and Animation for the Web》后的总结,有兴趣的朋友可以去下载英文原版书籍阅读。
710 0
单片机复位电路原理介绍
复位电路的工作原理在书本上有介绍,51单片机要复位只需要在第9引脚接个高电平持续2us就可以实现,那这个过程是如何实现的呢?在单片机系统中,系统上电启动的时候复位一次,当按键按下的时候系统再次复位,如果释放后再按下,系统还会复位。
1591 0
【产品介绍】“弹性裸金属服务器”到底有那些特性?
弹性裸金属服务器的八大特性,总结相关特性。那么阿里云弹性裸金属服务器(神龙)的表现呢
3041 0
Asp.net MVC Preview 4 中自定义Jquery的HtmlHelper扩展
前两天介绍了mvc pv4中AjaxHelper的用法 的确是比较方便,不过也有其缺点,那就是并不是所有人都用Asp.net Ajax的,所以这样做还是显示出了ms的霸气   没办法,工程里都用的是JQuery于是先试写了2个小功能   先说使用方法吧,第一个功能是Ajax载入另个页面                c.
734 0
了解超然物外的static-属性篇 | 带你学《Java面向对象编程》之十
本节通过传统类与使用static的类之间的比较,突出了static对于存储超大量重复性数据的优异表现。
920 0
+关注
3598
文章
840
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载