H5自定义属性

最新推荐文章于 2023-03-19 11:41:23 发布

一个想做架构师的前端开发学生

最新推荐文章于 2023-03-19 11:41:23 发布

阅读量147

点赞数

分类专栏： JavaScript基础知识文章标签： javascript css html5 前端

本文链接：https://blog.csdn.net/m_ik_z/article/details/117131433

版权

JavaScript基础知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

H5自定义属性

自定义属性的目的是为了保存数据，有些数据可以保存到页面中而不用保存到数据库中。
获取自定义属性的方式是：getAttribute(‘属性’)。
有一些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：
属性名不要包含大写字母，在 data- 后必须至少有一个字符。
该属性可以是任何字符串。
注意：自定义属性前缀 “data-” 会被客户端忽略。

设置HTML5自定义属性：
1. HTML5规定自定义属性 data- 开头作为属性名并且赋值。
  - 比如：
  - 使用JavaScript设置：element.setAttribute(‘date-index’,2)
2. 获取HTML5自定义属性
  - 兼容性获取 element.setAttribute(‘date-index’,2)。
  - HTML5新增 element.dataset.index 或者 element.dataset[‘index’] IE 11才开始支持。

实例：

<body>
	<p id="1" data-yhb="18" data-index="1">hello</p>
	<button id="btn_get">获取属性</button>
	<button id="btn_set">设置属性</button>
	<script>
		var p=document.querySelecter('p')
		document.querySelecter('#btn_get').onclick = function(){
			// 可以使用 dataset.属性名称 的方式获取。
			console.log(p.dataset.index)
			console.log(p.dataset.yhb)
			// 仍然可以使用 getAttribuet 方法获取带 data-前缀的属性。
			console.log('data-index')
		}
	</script>
</body>

拓展：

HTML5全局属性：

属性	描述
accesskey	设置访问元素的键盘快捷键。
class	规定元素的类名(classname）。
contenteditableNew	规定是否可编辑元素的内容。
contextmenuNew	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单。
data-*New	用于存储页面的自定义数据。
dir	设置元素中内容的文本方向。
draggableNew	指定某个元素是否可以拖动。
dropzoneNew	指定是否将数据复制，移动，或链接，或删除。
hiddenNew	hidden 属性规定对元素进行隐藏。
id	规定元素的唯一 id。
lang	设置元素中内容的语言代码。
spellcheckNew	检测元素是否拼写错误。
style	规定元素的行内样式（inline style）。
tabindex	设置元素的 Tab 键控制次序。
title	规定元素的额外信息（可在工具提示中显示）。
translateNew	指定是否一个元素的值在页面载入时是否需要翻译。

一个想做架构师的前端开发学生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5自定义属性

H5自定义属性自定义属性的目的是为了保存数据，有些数据可以保存到页面中而不用保存到数据库中。获取自定义属性的方式是：getAttribute(‘属性’)。有一些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性：属性名不要包含大写字母，在 data- 后必须至少有一个字符。该属性可以是任何字符串。注意：自定义属性前缀 “data-” 会被客户端忽略。设置HTML5自定义属性：HTML5规定自定义属性 data- 开头作
复制链接

扫一扫