【学习前端第三十五课】DOM的自定义属性

-Wake-

已于 2024-01-19 09:28:18 修改

阅读量981

点赞数 24

分类专栏：【前端】入门到就业文章标签：前端学习

于 2024-01-19 09:21:21 首次发布

本文链接：https://blog.csdn.net/weixin_65729202/article/details/135688564

版权

【前端】入门到就业专栏收录该内容

79 篇文章 1 订阅

订阅专栏

本文介绍了HTML中的自定义属性如何区别于系统属性，如何通过data-前缀转换为dataset对象，以及如何使用getAttribute和setAttribute操作自定义属性。同时，展示了如何在CSS中使用和修改自定义属性及CSS变量的应用实例。

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

DOM的自定义属性

首先，标签的属性除了我们认识的一些系统自带的属性之外，我们也可以自定义标签的属性，我们可以在任意你需要的元素上面添加任何你想要的属性，没有限制

<input type="text" placeholder="请输入内容" age="18" >

属性我们可以分成两个大类来看

1、attribute属性：标签元素属性

2、property属性：DOM对象属性

当我们通过querySelector方法获取到一个标签元素之后，attribute属性会自动转换成property属性，在attribute属性当中还分为系统自带属性和自定义属性，在上面提到的自动转换过程当中，自会转换attribute属性中系统自带属性并不会自动转换自定义属性

<input type="text" placeholder="请输入内容" age="18" >
<script type="text/javascript">
    var text = document.querySelector("input");
    //系统自带属性
    text.type;
    text.placeholder;
    
    //age属性自定义属性，无法在获取成DOM之后自动转换成property属性，所以不能通过上面的方式调用
    //要使用DOM的一个特殊的方法getAttribute
    text.getAttribute("age");    //"18"
</script>

自定义属性介绍

针对HTML里面的自定义属性的情况，我们发现，自定义的attribute是不能转换为property的，这样操作是不太方便的，所以w3c推出了标准的自定义属性定义与使用方式，只需要在原来自定义属性的基础上在前面添加一个 data- 即可，比如 data-age="18" 这样做之后就可以在网页加载的时候自动把这些自定义属性转换成property

自定义属性定义

<input type="text" placeholder="请输入内容" id="txt" data-sex="女" data-hobby="睡觉" age="18">
<script type="text/javascript">
    var txt = document.querySelector("#txt");
    console.dir(txt);
</script>

当我们获取当这个DOM对象之后，我们可以在当前DOM对象当中找到一个 dataset 的属性，这个属性里面就包含了我们之前通过 data- 定义的所有的attribute属性

dataset 是将当前标签上所有以 data-开头的属性集合起来，变成一个对象

var txt = document.querySelector("#txt");
txt.dataset.sex;
txt.dataset.hobby;

注意事项：

在使用 data- 自定义属性的时候，最好不要使用驼峰命名，如果非要用就写成 data-单词1-单词2

<input type="text" placeholder="请输入内容" id="txt" data-sex="女" data-hobby="睡觉" age="18" data-userName="张三" data-user-age="20">

这个时候获取到的自定义的名称

data-userName 在dataset中会转换成username

data-user-age 在dataset中会转换成驼峰命名 userAge

自定义属性的取值与赋值

自定义属性如果是通过data- 开头的，他的取值方式很简单，有两种

1、getAttribute() 方法

2、dataset属性进行取值

txt.getAttribute("data-hobby");
txt.setAttribute("data-hobby","20");
txt.dataset.sex = "男";

自定义属性的应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width:200px;
				height:200px;
				border:solid 2px #000;
			}
			[data-box-status="1"]{
				background-color:red;
			}
			[data-box-status="0"]{
				background-color:blue;
				border-radius:50%;
			}
		</style>
	</head>
	<body>
		<div class="box" data-box-status="1"></div>
		<script type="text/javascript">
			//点击元素，让元素在红色的方形和蓝色圆形之间切换
			var box = document.querySelector(".box");
			box.addEventListener("click",function(e){
				var boxStatus = this.dataset.boxStatus;
				this.dataset.boxStatus = +!+boxStatus
			})
		</script>
	</body>
</html>

扩展-css变量操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				background-color:red;
				--x:200px;
				width:var(--x);
				height:var(--x);				
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script type="text/javascript">
			var box = document.querySelector(".box");
			var cssObj = window.getComputedStyle(box);
			//getPropertyValue是用于获取css变量值的方法
			var x = cssObj.getPropertyValue("--x");
			console.log(x);
			box.style.setProperty("--x","100px");
		</script>
	</body>
</html>

在上面的例子里面说明了css变量的操作过程

取值的时候使用 getComputedStyle 获得到css对象，然后调用 getPropertyValue 来获取css变量值
赋值则找 style 然后通过 setProperty 来是现实变量的赋值

-Wake-

关注

24
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
【学习前端第三十五课】DOM的自定义属性

首先，标签的属性除了我们认识的一些系统自带的属性之外，我们也可以自定义标签的属性，我们可以在任意你需要的元素上面添加任何你想要的属性，没有限制< input type = " text " placeholder = " 请输入内容 " age = " 18 " >< input type = " text " placeholder = " 请输入内容 " age = " 18 " >
复制链接

扫一扫

专栏目录