HTML5 标签自定义属性,以及在JS中如何获取自定义属性的值

最新推荐文章于 2024-08-27 16:35:39 发布

houyanhua1

最新推荐文章于 2024-08-27 16:35:39 发布

阅读量6.6k

点赞数 1

本文链接：https://blog.csdn.net/houyanhua1/article/details/79630683

版权

JavaScript 同时被 3 个专栏收录

140 篇文章 4 订阅

订阅专栏

HTML5

54 篇文章 1 订阅

订阅专栏

CSS3

33 篇文章 0 订阅

订阅专栏

demo.html(JS中获取属性值)：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--给标签添加自定义属性必须以 data- 开头-->
	<div class="box" title="盒子" data-my-name="zs" data-content="这是个div">aaa</div>
	<script>
		var box = document.querySelector(".box");
		console.log(box.className);  //获取标签的原有属性值
		console.log(box.title);  //获取标签的原有属性值

		console.log(box.dataset["content"]);  //获取标签自定义属性的值
		box.dataset["content"] = "aaa";   //设置自定义属性的值。
		console.log(box.dataset["myName"]);  //标签自定义属性data-my-name的获取方式用驼峰命名方式获取

	</script>
</body>
</html>

demo.html(CSS中获取属性值)：

<!DOCTYPE html>        
<html lang="en">        
<head>        
    <meta charset="UTF-8">        
    <title>Document</title>        
    <style>
    	span {
    		border: 1px solid #000;
    	}

        span::before {
        	content: attr(data-text);   /* 伪元素通过attr()获取标签自定义属性的值 */
        }

    </style>        
</head>        
<body>            
    <span data-text="aaa">bbb</span>      <!-- data-text标签自定义的属性 -->
</body>        
</html>