在这里插个眼，说实话，没太明白
区别和相同
- 一般的id，class，title等属性为property和attribute共有，但自定义属性（</>内）为attribute所有（当你设定的自定义属性与内置属性重名时通过getAttribute获取）。
- attribute中的class在property中叫做className（在取值和赋值时注意）
- 取值和赋值（设值）的区别：
3.1.attribute的取值和赋值:getAttribute(‘属性名’,‘属性值’)，setAttribute(‘属性名’,‘属性值’)
注意获取用getAttribute，设置自定义属性可打印可显示
3.2.property的取值和赋值分别为:变量=对象.属性;对象.属性=属性值（设置自定义属性可打印不可显示）
3.3.对特性Attribute只能赋值字符串，而对属性Property就可以赋任何类型的值 - 同时可以用元素对象.style.setProperty(“属性”,“属性值”,“权重”)设置（，赋值，取值）内联样式，其中属性值为变量或数字时不用加引号，权重可以选填。（为空或为impoartant）
注意设置的自定义属性为内联样式要加”- -“，获取用getPropertyValue，可打印可显示 - 对象.style.属性也可以设置内联样式（设置自定义属性可打印不可显示）。
标签属性的自定义属性和样式属性中的自定义属性（有无“- -”）
上述均获取不到css样式属性
1，2，3和4，5
标签属性和标签样式属性有区别。
标签属性的自定义属性和样式属性中的自定义属性（有无“- -”）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.a{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="a"></div>
</body>
<script>
var div=document.querySelector(".a");
div.setAttribute("aaa","aaa");
console.log(div.getAttribute("aaa"));
div.bbb="bbb";
console.log(div.bbb);
div.style.setProperty("--ccc","ccc");
console.log(div.style.getPropertyValue("--ccc"));
div.style.ddd="ddd";
console.log(div.style.ddd);
</script>
</html>效果：
setAttribute
设置id代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#a{
width: 100px;
height: 100px;
background-color: aqua;
}
#b{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="a"></div>
</body>
<script>
var div=document.querySelector("#a");
div.setAttribute("id",'b');
</script>
</html>效果：
设置自定义属性（不可以用“- -属性名”这种格式）代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="a"></div>
</body>
<script>
var div=document.querySelector("#a");
div.setAttribute("aaa",'1000');
</script>
</html>效果：
设置样式名代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.a{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div id="a"></div>
</body>
<script>
var div=document.querySelector("#a");
div.setAttribute("class",'a');
</script>
</html>效果：
property
设置id名代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#c{
width: 500px;
height: 500px;
background-color: aqua;
}
.a{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="a"></div>
</body>
<script>
var div=document.querySelector(".a");
div.id="c"
</script>
</html>效果：
设置样式名代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.a{
width: 100px;
height: 100px;
background-color: black;
}
.b{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="a"></div>
</body>
<script>
var div=document.querySelector(".a");
div.className="b"
</script>
</html>效果：
设置自定义属性的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.a{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="a"></div>
</body>
<script>
var div=document.querySelector(".a");
div.asssc="cda"
console.log(div.asssc);
</script>
</html>效果：
20210818补充：getComputedStyle
用法：var style = window.getComputedStyle(“元素”, “伪类”);其中伪类可以省略。
注意事项：
1.getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写，能屈能伸。
2.getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。
3.getComputedStyle不可以获取上面任意一种方法的自定义属性。
代码：
<script>
var div=document.querySelector("div");
div.style.width="1000px"
var divcss=getComputedStyle(div);
console.log(divcss.width);
</script>效果：
参考文章：
setAttribute()和setProperty()DOM元素的特性（Attribute）和属性（Property）CSSStyleDeclaration.setProperty()获取元素CSS值之getComputedStyle方法熟悉
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
