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>
效果是来回动：
