网站建设   网站建设技术   网页设计   html/css  

data-*属性具体怎么用

人浏览  发布时间:2021-10-27

data-* 属性用于存储页面或应用程序的私有自定义数据。 data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。 data-* 属性包括两部分: 属性名不应该包含任何大写字母,并且在前缀 data- 之后必须有至少一个字符 属性值可以是任意字符串。 举个例子,定义不同的动物 1 2 3 4 5 ul li data-animal-type = bird Owl/ li li data-animal-type = fish Salmon/ li li data-animal-type = spider Tarantula/ li / ul data-* 的值的获取和设置 2种方法: 1、传统方法 getAttribute() 获取data-*属性值; setAttribute() 设置data-*属性值 2、HTML5新方法 例如 data-href dataset.href 获取data-href属性值 dataset.href = http://imooc.com 设置data-href属性值 总结:传统方法无兼容性问题,但是不够优雅、方便 HTML5新方法很优雅、方便,但是有兼容性问题,可以在移动端开发或不支持低版本浏览器的项目中使用...

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

data-* 属性包括两部分:

属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符

属性值可以是任意字符串。

举个例子,定义不同的动物

1
2
3
4
5
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li
<li data-animal-type="spider">Tarantula</li
</ul>
 

data-* 的值的获取和设置

2种方法:

1、传统方法

     getAttribute() 获取data-*属性值;

     setAttribute() 设置data-*属性值

2、HTML5新方法

     例如 data-href 

     dataset.href 获取data-href属性值

     dataset.href = 'http://imooc.com' 设置data-href属性值 

总结:传统方法无兼容性问题,但是不够优雅、方便

         HTML5新方法很优雅、方便,但是有兼容性问题,可以在移动端开发或不支持低版本浏览器的项目中使用

点击浏览下载讲义资料
(编辑:360°搜索建站)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:广东省深圳市宝安区西乡街道东方商务大厦 WebDesign ©2012 Corporation 360°搜索建站网 网站地图