style属性
通过style属性修改样式
获取属性后查看style属性下的值可以和css属性一致
<div id="d1">hello</div id="d1">
<div id="d2">world</div>
<script>
var d1 = document.querySelector("#d1");
var d2 = document.querySelector("#d2");
console.log([d1]);
//修改属性
d1.style.height = "200px";
d1.style.weight = "200px";
d1.style.background = "blue";
</script>
注意:
- 通过直接设置style属性的值,优先级是最高的,因为是直接修改标签的style属性
- 设置属性的时候,如果css属性是由多个单词组成,那么js中就需要使用驼峰命名的形式进行调用和设置
className
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 200px;
height: 200px;
background: purple;
}
</style>
</head>
<body>
<div id="d1">hello</div id="d1">
<div id="d2">world</div>
<script>
var d1 = document.querySelector("#d1");
var d2 = document.querySelector("#d2");
//修改属性
d1.className = "d1"; //可以添加多个类名,用空格连接
</script>
</body>
</html>
classList
通过classList属性的add/remove/replace方法进行修改
xx.classList.add("class1");
xx.classList.remove("class1");
xx.classList.replace("class_before","class_after");
style标签
通过添加 style,然后改变style便签内的内容来添加样式
<div id="d1">hello</div id="d1">
<div id="d2">world</div>
<script>
var d1 = document.querySelector("#d1");
var d2 = document.querySelector("#d2");
var d2Style = document.createElement("style");
//修改属性
d2Style.innerHTML = `
#d2{
width: 200px;
height: 200px;
background: purple;
}
`
var body = document.querySelector("body");
body.appendChild(d2Style);
</script>