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
来是现实变量的赋值