访问元素中行内样式

style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息
但不包含与外部样式，或嵌入式样式层叠而来的样式
短划线的css属性必须转换成驼峰大小写形式(float是关键字，所以规定为cssFloat)

1. HTML

<div style="color:blue;background-color:yellow!important;">字体</div>

2. 外链样式

    div{
width:100px;
height:100px;
background-color:red;
border:6px solid#ccc;
}

JS

var divEle=document.querySelector('div');

1.获取行内样式信息

var divStyle=divEle.style;

1.1应用给元素的css属性的数量

console.log(divStyle.length);//2

1.2返回给定位置的CSS属性的名称与length配套使用

console.log(divStyle.item(0));//color

1.3cssText

通过它能够访问到style特性中的CSS代码
在读取模式下，cssText返回浏览器对style特性中CSS代码的内部表示
在写入模式下，赋给cssText的值会重写整个style特性的值
设置cssText是为元素应用多项变化最快捷的方式，因为可以一次性地应用所有变化
console.log(divStyle.cssText);//color:blue;background-color:yellow;

1.4获取指定属性的值

console.log(divStyle.getPropertyValue('color'));//blue

1.5如果给定的属性使用了!important设置，则返回"important"；否则，返回空字符串

console.log(divStyle.getPropertyPriority('background-color'));//important

2.设置样式

2.1

divStyle.color='#FFF';
divStyle.backgroundColor='#000';

2.2 setProperty(属性,属性值,权重)第三个参数(可选):优先权重"important"或者一个空字符串

divStyle.setProperty('color','green');

3.删除属性

removeProperty(propertyName)：从样式中删除给定属性
意味着将会为该属性应用默认的样式（从其他样式表经层叠而来）
console.log(divStyle.removeProperty('color'));//返回给定属性的值green