当前位置:首页 > 前端技术 > HTML5自定义属性

HTML5自定义属性

2022年08月04日 23:01:26前端技术6

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是为什么在HTML5规范里增加了一个data属性,你可以拿它做很多有用的事情。

你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。

下面的一个代码片段是一个有效的HTML5标记:

  <div id="awesome"
     data-myid="3e4ae6c4e">Some awesome data</div>

可是,怎么来读取这些数据呢?你当然可以遍历页面元素来读取你想要的属性,但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj),这个方法是在jQuery1.4.3版本后出现的,它能返回相应的data属性。

举个例子,你可以用下面的写法读取 data-myid属性值:

 var myid= jQuery("#awesome").data('myid');
console.log(myid);

你还可以在"data-*" 属性里使用json语法,例如,如果你写出下面的html:

<div id="awesome-json" data-awesome='{"game":"on"}'></div>

你可以通过js直接访问这个数据,通过json的key值,你能得到相应的value:

var gameStatus= jQuery("#awesome-json").data('awesome').game;
console.log(gameStatus);

你也可以通过.data(key,value)方法直接给"data-*" 属性赋值。一个重要的你要注意的事情是,这些"data-*" 属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。

译者补充:尽管"data-*" 是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)方法来操作"data-*" 数据。

作者:编程之间
来源链接:https://blog.csdn.net/limm33/article/details/50915801

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17339.html

标签: HTML
分享给朋友:

“HTML5自定义属性” 的相关文章

HTML常用标签及其用法总结

HTML常用标签及其用法总结

1、HTML分块--------< div> 说起HTML的标签,不得不提起的就是< div>,在制作一个网页的时候,应该先将他们划分为许多个块,再在这些块中进行操作。 整个电脑能够显示是因为显示屏上一个一个的小颗粒,如下宽度:1...

HTML常用标签的用法

HTML常用标签的用法

一、首先要了解一下什么是HTML,HTML(Hyper Text Markup Language,简称:HTML)也叫作超文本标记语言,是一种使用结构化Web网页及其内容的标记语言,HTML文档也叫做Web页面, 下面就来讲讲一些HTML中常用的标签。...

Markdown中使用html标签

有时候,我们会在笔记中使用一些HTML标签,但是Markdown中直接使用html标签会被解析为格式.该怎么书写,可以直接显示为html的标签呢. <h1>这是一个标题</h1> //其中的<h1&g...

HTML5 速查列表

HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用。 HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题<...

HTML框架结构标签(frameset)

HTML框架结构标签(frameset)

第一次了解到竟然还有HTML框架结构标签()。为此小编在实例中应用了一下,但是在搭建框架之初就遇到 了问题。为此总结本博客,以便大家能及时解决问题。 什么是HTML框架结构标签(<frameset>)...

HTML表单标签常用属性及其常见子标签

表单标签 通过form来定义 <form> //1.input类型 //2.select类型 //3.textarea类型 </form> 常用属性 ​ action:提交路径,默认是当...

HTML全部标签简介

HTML全部标签简介

XHTML1.0提供了几种DOCTYPE可选择: 1.过渡型(Transitional ) 2.严格型(Strict ) HTML是简单的文本标签语言,一个HTML网页文件都是有元素构成的,元素由开始标签、结束标签、属性和元素的内容4部分构成。再...

HTML-列表标签list与表格标签table

HTML-列表标签list与表格标签table

目录   列表标签 表格标签 列表标签      <ul>无序列表             ...

HTML5 video 视频标签使用介绍

HTML <video> 适用于HTML 5+,用于定义在线观看的视频流媒体。 <video width="320" height="240" src="movie.ogg" controls="controls"> 这里是注释文字,如果无法...

HTML标签大全(常用)

转自:https://www.cnblogs.com/moije/p/6751624.html 文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。 HTM...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。