H5自定义属性

HTML5自定义属性介绍

最新推荐文章于 2025-07-19 17:35:42 发布

原创最新推荐文章于 2025-07-19 17:35:42 发布 · 536 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #javascript

H5学习专栏收录该内容

14 篇文章

订阅专栏

H5自定义属性

传统的HTML中如果想要实现某种样式，可以在标签上添加id、class、或者在标签上添加固有属性，通过CSS中的类选择器、id选择器、属性选择器来实现，在许多UI框架中，例如：bootstrap，可以通过data-[ ]自定义属性，不用写一行js代码，方便了很多。同样在HTML5可以通过data-自定义属性名来给元素添加自定义的属性名。一旦添加完成之后。通过JS可以获取以及设置自定义属性。
例如：

<div data-sup= "thisData" id = "first"></div>

<script>
    //利用原生js获取
    var first= document.getElementsById("first");
    //获取sup值
    console.log(first.dataset.sup);
    //设置sup值
    support.dataset.sup = "second";
    
</script>

H5中自定义属性大体可分为两种方式：

直接在页面中写入data-[ ]，
通过js设置（上面的小例子就是js方式）

在代码开始之前先说明一下规范和注意事项

以data- 开头
data-后面必须至少有一个字符，多个单词使用 - 连接
名称最好使用小写，然后用-连接。取值时候用小驼峰取出
名称中不要有特殊字符
最好不要用纯数字
下面展示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				background-color: aqua;
				width: 300px;
				height: 300px;
			}
			[data-text-color] {
				color: brown;
			}
			[data-text-color-pink] {
				color: pink;
			}
			[data-text-color-red] {
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- 1、如何自定义属性 -->
		<div id="" class="box" data-uid='201501' data-user-name="菜鸟" data-2='使用纯数字'></div>
		<div id="" data-text-color>通过data-设置样式</div>
		<div id="" data-text-color-pink>通过data-设置样式</div>
		<div id="" data-text-color-red>通过data-设置样式</div>
		<div id="" data-text-color>通过data-设置样式</div>
	</body>
	<script>
		// 第一种-直接在页面中写入data-uid
		var box = document.querySelector(".box")
		// 获取自定义属性-获取值 getattribut
		console.log("uid", box.getAttribute('data-uid')) //可以拿得到
		console.log("userName", box.getAttribute('data-user-name')) //可以拿得到

		// 第二种-用js设置
		box.setAttribute("data-sex", "女")

		// 通过dataset 设置值和取值
		box.dataset.des = '自定义指令' //设置值

		// 取值
		console.log(box.dataset) //DOMStringMap 

		// 获取dataUsername
		console.log(box.dataset.userName) //连着的字符需要转换成驼峰命名
		console.log(box.dataset["userName"]) //解构的方式，也需要是驼峰
		console.log(box.dataset[2]) //纯数字必须使用解构
		
		var box = document.querySelectorAll("[data-user-name]")//通过querySelectorAll获取所有的含有该属性的元素
		console.log(box)
	</script>
</html>