JavaScript操作文档样式（css）的方法

一、修改文档元素的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时，它只会返回一串值，而不会告诉你它到底应用了哪个字体。