获取方式
方法一: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>