关于CSS的一些容易被忽略的东西

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