1.获取CSS属性值
在JavaScript中，我们可以使用getComputedStyle()方法来获取一个CSS属性的取值
语法：
getComputedStyle(obj).attr
j表示DOM对象，也就是通过getElementById()、getElementsByTagName()等方法获取的元素节点
attr表示CSS属性名。需要注意的是，这里的属性名使用的是“骆驼峰型”的CSS属性名。如font-size应该写成fontSize,border-bottom-width应该写成borderBottomWidth
案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TEXT</title> <style type="text/css"> #box { width: 100px; height: 100px; background-color: hotpink; } </style> <script src="js/index.js"></script> </head> <body> <input type="button" id="btn" value="获取颜色"/> <div id="box"></div> </body> </html>
window.onload=function () { var oBtn = document.getElementById("btn"); var oBox = document.getElementById("box"); oBtn.onclick = function() { alert(getComputedStyle(oBox).backgroundColor); }; }
点击获取颜色后，后弹出当前div的背景颜色信息，成功获取了CSS的属性信息
2.设置CSS属性值
在JavaScript中，想要设置一个CSS属性的值，有两种方式可以实现。style对象。cssText属性。
style对象
使用style对象来设置一个CSS属性的值，其实就是在元素的style属性中添加样式，这种方式设置的是“行内样式”
例如，我们想实现一个div点击变色的功能：
window.onload=function () { var oBtn = document.getElementById("btn"); var oBox = document.getElementById("box"); oBtn.onclick = function() { oBox.style.backgroundColor = "red"; }; }
如果想要为上面的div元素同时添加多个样式，实现代码如下：
width:50px;height:50px;background-color:lightskyblue;
如果用style来实现，就得一个个写：
oDiv.style.width="50px"; oDiv.style.depth="50px"; oDiv.style.backgroundColor="lightskyblue";
一个个写十分烦琐。那么，有没有一种相对高效的实现方式呢？当然有，那就是cssText属性
cssText属性
注意，这个字符串中的属性名不再使用骆驼峰型的写法，而是使用平常的CSS写法🥞
例如：
window.onload=function () { var oBtn = document.getElementById("btn"); var oBox = document.getElementById("box"); oBtn.onclick = function() { oBox.style.cssText = "background-color:blue;width:200px;height:200px;" }; }
当我们点击按钮之后，不仅背景颜色会发生改变，div块的大小也会发生改变
在实际开发的时候，如果要为一个元素同时设置多个CSS属性，我们很少使用cssText来实现，而更倾向于使用操作HTML属性的方式给元素加上一个class属性值，从而整体地给元素添加上样式🍟
