JS之元素中的样式

一、访问元素中行内样式

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

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

// 外链样式
    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

二、计算属性

1. 虽然 style 对象能够提供支持 style 特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息

2. “DOM2 级样式”增强了 document.defaultView ，提供了getComputedStyle() 方法, 返回CSSStyleDeclaration 对象（与 style 属性的类型相同)，并且是计算过后的样式(行内，内嵌(内部)， 外链)

4.第一个参数： 取得计算样式的元素； 第二个参数： 伪元素字符串(':after') 在旧版本之前，第二个参数“伪类”是必需的，现代浏览器已经不是必需参数了

5.两种写法： window.getComputedStyle() || document.defaultView.getComputedStyle()

6.IE 不支持 getComputedStyle() 方法，但它有一种类似的概念。在 IE 中，每个具有 style 属性的元素还有一个 currentStyle 属性,这个属性是 CSSStyleDeclaration 的实例，包含当前元素全部计算后的样式

function getStyle(ele) {
return window.getComputedStyle ? window.getComputedStyle(ele) : ele.currentStyle;
        }

console.log(getStyle(divEle)); // 返回CSSStyleDeclaration

三、 视口位置

1. var rect = element.getBoundingClientRect(无)用于获取某个元素相对于视口的位置集合。

2. 集合中有top, right, bottom, left等属性。
   rect.top: 元素上边到视口顶部的距离;
   rect.right: 元素右边到视口左边的距离;
   rect.bottom: 元素下边到视口顶部的距离;
   rect.left: 元素左边到视口左边的距离
   var rect = divEle.getBoundingClientRect();

        // 获取元素的宽高(包括边框)
        var rectWidth = rect.right - rect.left;
        var rectHeight = rect.bottom - rect.top;

        console.log(rectWidth, rectHeight); // 112 212