获取方式
方法一：DOM节点.style.样式名
作用：获取内联样式，如果获取的样式没有设置或者不是内联样式，则输出空字符串""；
缺点：获取不到嵌入样式和外部样式。
<style type="text/css">div {height: 200px;}</style><body><div style="background-color:green"></div></body><script>var dom = document.getElementsByTagName("div")[0];console.log(dom.style.backgroundColor);//greenconsole.log(dom.style["background-color"]);//greenconsole.log(dom.style.height);//空字符串""</script>
方法二：DOM节点.currentStyle.样式名
作用：获取元素渲染之后的样式；
缺点：只能在IE浏览器使用。
<style type="text/css">div{background-color: green;}</style><body><div></div></body><script>var dom = document.getElementsByTagName("div")[0];console.log(dom.currentStyle.backgroundColor);//greenconsole.log(dom.currentStyle["background-color"]);//IE8 输出 undefinedconsole.log(dom.currentStyle.height);//IE8 输出 auto</script>
方法三：window.getComputedStyle(DOM节点).样式名
作用：获取元素样式的最终计算值；
缺点：不兼容IE8及以下版本。
<style type="text/css">div{background-color: green;}</style><body><div></div></body><script>var dom = document.getElementsByTagName("div")[0];console.log(window.getComputedStyle(dom,null).backgroundColor);//rgb(0, 128, 0)console.log(window.getComputedStyle(dom,null)["background-color"]);//rgb(0, 128, 0)console.log(window.getComputedStyle(dom,null).height);//0px</script>
设置方式
方法一：DOM节点.style.样式名 = 样式值
作用：设置内联样式；
缺点：无法设置!important，设置后语句会失效。
<body><div></div></body><script>var dom = document.getElementsByTagName("div")[0];dom.style.width = "300px";console.log(dom.style.width); //300pxdom.style.height = "300px!important"; //这条语句会失效</script>
方法二：DOM节点.style.setProperty(样式名, 样式值)
作用：设置内联样式，可以设置!important，语法为DOM节点.style.setProperty(样式名, 样式值, 'important')。
<body><div></div></body><script>var dom = document.getElementsByTagName("div")[0];dom.style.setProperty("width", "100px", 'important');console.log(dom.style.width); //100px</script>
方法三：DOM节点.setAttribute("style",样式值)
作用：可以设置多条内联样式，可以设置!important。
<body><div></div></body><script>var dom = document.getElementsByTagName("div")[0];dom.setAttribute("style","width:100px!important; height:100px;");console.log(dom.style.width); //100px</script>
方法四：DOM节点.style.cssText = 样式值
作用：设置多个内联样式，可以设置!important。
<body><div></div></body><script>var dom = document.getElementsByTagName("div")[0];dom.style.cssText = "width: 100px!important; height:300px;";console.log(dom.style.width); //100px</script>
方法五：document.styleSheets[数字].insertRule(样式)
作用：在样式表中添加样式；
注意：document.styleSheets用于获取应用在文档的所有样式表，获取到的结果会以数组返回，因此需要添加下标来表示document.styleSheets[数字]来表示某个样式表；
缺点：不支持IE，文档需要有外部样式表或者嵌入样式表至少一个。
<body><div></div></body><script>var dom = document.getElementsByTagName("div")[0];document.styleSheets[0].insertRule("div{width: 100px!important; height: 300px;}")console.log(dom.style.width);//""console.log(window.getComputedStyle(dom).width); //300px</script>
方法六：document.styleSheets[数字].addRule(选择器,样式)
作用：在样式表中添加样式；
缺点：只能在IE浏览器使用，文档需要有外部样式表或者嵌入样式表至少一个。
<body><div></div></body><script>var dom = document.getElementsByTagName("div")[0];document.styleSheets[0].addRule("div","width: 100px!important; height: 200px;")console.log(dom.style.width);//""console.log(dom.currentStyle.width); //300px</script>
