DOM设置元素的样式
1、通过style属性设置修改样式
【注!】此方式是直接设置标签的style属性,设置完后,优先级最高
<div id="d1">
helloworld
</div>
<script type="text/javascript">
//1通过style属性设置修改样式
var d1=document.querySelector('#d1')
console.log([d1])
d1.style.width="100px";
d1.style.height="200px";
d1.style.backgroundColor="skyblue"
</script>
结果:
2、通过修改类名从而修改样式
【注!】在设置css属性时,如果css属性是由多个单词组成,比如background-color。在js中用驼峰命名的形式进行调用和设置:backgroundColor
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a{
width:200px;
height: 200px;
background-color: darkorchid;
}
.b{
font-size: 40px;
color: blue;
}
</style>
</head>
<body>
<div id="d2">
helloworld2
</div>
<script type="text/javascript">
//2通过修改类名从而修改样式
var d2=document.querySelector("#d2");
d2.className="a b"
console.log([d2])
</script>
</body>
结果:
【注】修改类名还可以通过classlist属性的add(“类名”)/remove(“类名”)/replace(“原类名”,“现类名”)修改className
3、通过增加style标签来修改样式
此方式不常用
例子:
<div id="d1" class="donghua">
hello
</div>
<script type="text/javascript">
var style=document.createElement("style")
//``反引号,可以包裹多行字符串
style.innerHTML=`
.donghua{
width: 200px;
height: 200px;
background-color: #0000FF;
animation: donghua 3s alternate infinite;
}
@keyframes donghua{
from{
transform: translate(0,0);
}
to{
transform: translate(400px,0);
}
}
`
var body=document.querySelector('body');
body.appendChild(style)
</script>
效果是来回动: