H5自定义属性

最新推荐文章于 2023-07-06 16:16:10 发布

黄色的海绵宝宝

最新推荐文章于 2023-07-06 16:16:10 发布

阅读量497

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_70552412/article/details/126566010

版权

本文介绍了HTML5中自定义属性（data-属性）的设置与获取方法，强调了data-前缀的使用来避免歧义。通过示例展示了如何使用JavaScript操作这些属性，包括使用getAttribute和dataset接口。讨论了dataset集合在处理多个自定义属性时的便利性，以及驼峰命名法在处理带有多个单词的自定义属性时的应用。同时，提醒开发者注意不同浏览器的兼容性问题。

摘要由CSDN通过智能技术生成

自定义属性的目的：时为了保存并使用数据，有些数据可以保存到页面而不用保存到数据库

自定义属性获取是通过console.log(div.getAttribute('属性));获取。

但是有些自定义属性很容易引起歧义，不容易判断元素是内置属性还是自定义属性。

H5新增了自定义属性：

1.设置H5自定义属性

H5规定自定义属性 data- 开头做为属性名并赋值

比如 <div data-index="1" ></div>

或使用JS设置

element.getAttribute('data-index',2)

<div getTime = "20" data-index = "2" data-lest-name="ady"></div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			// 输出
			console.log(div.getAttribute('getTime'));
			// 添加一个自定义的属性
			div.setAttribute('data-time',20);
			
			// 获取h5自定义属性可选择
			// 1.兼容性较好  element.getAttribute('data-index');
			console.log(div.getAttribute('data-index'));
			
			// 2.H5新增 : element.dataset.index 或者 element.dataset['index']  ie11  才开始支持 
			// 虽然ie已经凉凉了，但是很多网站维护还是能用到的
			// dataset 是一个集合里面存放了所有以   data-  开头的自定义属性
			console.log(div.dataset.index);
			console.log(div.dataset['index']);
			
			// data-lest-name  如果遇到这种自定义属性里面有多个链接的单词，
			// 我们获取的时候就采取驼峰命名法             lestName
			console.log(div.dataset.lestName);
			console.log(div.dataset['lestName']);
		</script>

1.兼容性较好 element.getAttribute('data-index'); ----常用，因为兼容性好

多个自定义属性的多个链接的话，我们采用驼峰命名法

dataset - - - 是一个集合，里面存放了所有以 data- 开头的自定义属性