23 H5自定义属性属性值操作

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

丨Anna丨

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

阅读量356

点赞数

分类专栏：前端重拾 # HTML5核心文章标签： html5 javascript

本文链接：https://blog.csdn.net/u014331138/article/details/109329923

版权

前端重拾同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

HTML5核心

4 篇文章 0 订阅

订阅专栏

23 H5自定义属性属性值操作

H5每一个预定义attribute属性都有一个对应的property属性与之对应。但是自定义属性没有。因此H5提供一个自定义属性属性值的property的操作。

语法

自定义的数据属性名称是以data- 开头的.它必须要遵循XML名称的产生规则规则，该规则是说它只可以包含字母，数字和下面的字符：Dash(-)，点(.)，冒号(:)，下划线(_).此外不应包含ASCII码大写字母
Eg:
<div id="test" data-test="test1" data-user-name="张三"></div>
自定义的数据属性名称转化成DOMStringMap的键值时会遵循下面的规则：
  前缀data-被去除(包括减号)；
  对于每个在ASCII小写字母 a到 z前面的减号(U+002D)、减号会被去除，并且字母会转变成对应的大写字母.
  其他字符(包含其他减号)都不发生变化。
例如：data-user-name获取方式为
  element.dataset.userName

示例

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test" data-test="test1" data-user-name="张三"></div>
		<script type="application/javascript">
			var divNode = document.querySelector("#test");
			// 获取自定义属性值
			console.log(divNode.dataset.test);
			console.log(divNode.dataset.userName);
			// 设置自定义属性值
			divNode.dataset.test = "test2";
			divNode.dataset.userName = "李四";
			console.log(divNode.dataset.test);
			console.log(divNode.dataset.userName);
		</script>
	</body>

效果

丨Anna丨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
23 H5自定义属性属性值操作

23 H5自定义属性属性值操作 H5每一个预定义attribute属性都有一个对应的property属性与之对应。但是自定义属性没有。因此H5提供一个自定义属性属性值的property的操作。语法自定义的数据属性名称是以data- 开头的.它必须要遵循XML名称的产生规则规则，该规则是说它只可以包含字母，数字和下面的字符：Dash(-)，点(.)，冒号(:)，下划线(_).此外不应包含ASCII码大写字母Eg:<div id="test" data-test="test1" d..
复制链接

扫一扫