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

版权声明： https://blog.csdn.net/wlk2064819994/article/details/79998311

一、修改文档元素的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>

四、操作样式表文件。
利用document.stylesheets[]的insertRule()和deleteRule()等方法操作。不过不推荐，IE浏览器的方法名字不同，且目前兼容性不太好。如果想详细了解一下，请参考《权威指南6》的第436页。

补充知识：
    如何获取元素的计算样式(最终显示时的样式信息)？
    利用浏览器对象的getComputedStyle()方法。

    注意点：
    1.只能获取，不能修改。
    2.获取的值是绝对值。相对单位会转换成绝对单位，例如：em会转换成px。颜色以rgb或rgba形式返回。
    3.不计算符合属性。例如：不要查询margin，要查询marginTop.
    这个方法也会有欺骗性，例如：查询字体名fontFamily时，它只会返回一串值，而不会告诉你它到底应用了哪个字体。