一、修改文档元素的style属性。
例如：e.stye.backgroundColor = "red";
注意点：
1.一次只能操作一个属性。
2.被操作的属性的书写要符合驼峰命名法。
3.属性值有单位的必须带上单位。
4.属性值是字符串。
5.由于操作的是style属性，所以设置样式很有用，但是获取样式值就不推荐了，毕竟只能获取style中的样式值嘛！
二、通过setAttribute()方法操作style和class属性。
例如：
<div id="id1"></div>
<script type="text/javascript">
var e = document.getElementById("id1");
e.setAttribute("style","width:100px;height:100px;background-color:red;");
</script>三、通过CSSStyleDeclaration对象的CSSText属性操作样式。
例如：
<div id="id2"></div>
<script type="text/javascript">
var e = document.getElementById("id2");
e.style.cssText = "width:100px;height:100px;background-color:red;";
</script>
四、Element.classList和Element.className属性
classList有add、remove、toggle、contains、replace等方法来操作元素的class值。
const div = document.createElement('div');
div.className = 'foo';
// our starting state: <div class="foo"></div>
console.log(div.outerHTML);
// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");
// <div class="anotherclass"></div>
console.log(div.outerHTML);
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );
console.log(div.classList.contains("foo"));
// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");
// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);
// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");className就是获取和设置class属性字符串。
五、操作样式表文件。
利用document.stylesheets[]的insertRule()和deleteRule()等方法操作。不过不推荐，IE浏览器的方法名字不同，且目前兼容性不太好。如果想详细了解一下，请参考《权威指南6》的第436页。
补充知识：
如何获取元素的计算样式(最终显示时的样式信息)？
利用浏览器对象的getComputedStyle()方法。
注意点：
1.只能获取，不能修改。
2.获取的值是绝对值。相对单位会转换成绝对单位，例如：em会转换成px。颜色以rgb或rgba形式返回。
3.不计算符合属性。例如：不要查询margin，要查询marginTop.
这个方法也会有欺骗性，例如：查询字体名fontFamily时，它只会返回一串值，而不会告诉你它到底应用了哪个字体。
