js中获取元素的样式常用的话就是element.style.属性名;
实质上style只是CSSStyleDeclaration这个对象的一个实例,而这个CSS对象的原型上有许多我们容易忽略的方法以及属性
我测试了一些感觉比较有用的方法,直接上代码吧:
<style type="text/css"> #app p{font-size: 30px;} </style> <div id="app"> <p style="font-weight: bolder!important;">深入了解CSS</p> </div> <script type="text/javascript"> //通过setAttribute,getAttribute,removeAttribute方法可以操作style let p=document.getElementById("app").getElementsByTagName('p')[0] p.setAttribute("style", "color:red!important;font-style:italic;font-weight:bolder!important;")//会覆盖原有的行内样式 //获取对象的样式可以直接使用.style来进行获取,但是只能获取行内样式,无法获取样式表和内联样式和继承样式属性。 let styleInP=p.style;//从log输出来看 style是CSSStyleDeclaration的一个实例 console.log(styleInP); console.log(styleInP.fontSize)//空值,只能读取行内样式 console.log('行内样式的个数为:'+styleInP.length);//获取所有行内样式的个数 console.log('所有的行内样式:'+styleInP.cssText);//.cssText属性用于获取所有行内样式的文本 console.log(styleInP) //要想获取元素的所有的样式可以使用getComputedStyle("元素名");//第二个参数是伪类 console.log(window.getComputedStyle(p));//输出一个对象,显示所有的属性名和值 //CSSStyleDeclaration.getPropertyPriority();获取属性值是否用!important 标记 测试之后发现该方法对于color这种没有-连接符的属性可以生效,对于font-weight这种无法生效(即使是fontWeight) console.log(styleInP.getPropertyPriority("color"));//'important' console.log(styleInP.getPropertyPriority("fontSize"));//'' //CSSStyleDeclaration.removeProperty();删除已经设定的值; 测试之后发现该方法对于color这种没有-连接符的属性可以生效,对于font-weight这种无法生效(即使是fontWeight) styleInP.removeProperty("fontWeight"); console.log(styleInP.cssText); //CSSstyleDeclarration.removeProperty();设置元素的属性值;该方法可以使用 styleInP.setProperty("border","1px solid #F34347",'important'); console.log(styleInP.cssText); //判断浏览器是否支持某个CSS属性,通过对其值得类型检测来判断 console.log(typeof styleInP.maxWidth==='string');//true console.log(typeof styleInP.textJustify==='string');//false </script>
以上是自己手动测试的结果 希望对各位有所帮助
over