原生js底层基础（十九）JavaScript 脚本化CSS

脚本化CSS分为两种，一种为可读可写，一种只读

1.可读可写

element.style.prop

即元素.style.属性名， 间接改变css样式（实际上改变的是元素的style属性，css能够被行间样式影响，所以是间接改变）

var div  = document.createElement('div')
document.body.appendChild(div)
div.style.height = '200px';	//写
div.style.height;	//读
"200px"

注意点：
（1）float是保留字 w3c标准建议写为 element.style.cssFloat；
（2）建议复合属性分开写；
（3）建议组合单词（有符号-）变小驼峰式。
举个栗子，在css中你可能会这么写"border:1px solid #F00",在利用js更改样式时最好分开写：

element.style.borderWidth = '1px';
element.style.borderStyle = 'solid';
element.style.borderColor = '#F00';

2.只读

1）window.getComputedStyle();

此方法是返回计算过后的样式 即计算机展示的元素样式，某些值会被转换如 color：red --> rgb(255,0,0)等，获取伪元素样式的唯一方法，IE9以下不兼容

（1）获取元素样式
window.getComputedStyle(ele,null)[prop]

var div  = document.createElement('div')
document.body.appendChild(div)
window.getComputedStyle(div,null)['width']

（2）获取伪元素样式
window.getComputedStyle(ele,“after”)[prop]

var div = document.getElementsByTagName('div')[0];
window.getComputedStyle(div,"after")['width']

2）element.currentStyle属性 （IE独有的属性）

返回按css层叠规则作用于元素的最终样式，IE下可以使用
element.currentStyle.prop

3.封装getStyle方法，获取元素属性（兼容）

	function getStyle(elem,prop){
		if(window.getComputedStyle){
			//不能用.prop，传进的是字符串
			return window.getComputedStyle(elem,null)[prop];

		}else{
			return elem.currentStyle[prop];
		}
	}