封装一个兼容性方法getOrSetStyle()，用来获取或设置样式

约定不等于承诺〃 2022-04-13 06:50 129阅读 0赞

## 封装一个兼容性方法getOrSetStyle()，用来获取或设置样式。 ##

操作css有四种方式：三种常见操作（行间样式，内联样式，外联样式），第四种是脚本化css，看似很高大尚，其实就是间接的操作css。getOrSetStyle方法就是用来脚本化css的。前提是要搞懂以下三部分知识点：

> 1.什么是dom.style.prop？  
> 答：这是用来读/写css行间样式的，没有兼容性问题，如果碰到像float这种的保留字属性时，直接在该属性前面加上css并首字母大写（dom.style.cssFloat）。如果碰到复合属性时必须拆解使用，将组合单词变成小驼峰式写法。注意：如果是写入操作，写入的值必须是字符串格式

> 2.什么是查询计算样式\[window.getComputedStyle(ele,null).prop\]？  
> 答：  
> \*\*a.\*\*此方法在IE8及IE8以下不兼容  
> \*\*b.\*\*只读不可写  
> \*\*c.\*\*此方法是获取当前元素最终所展现的样式（也就是css权重计算完以后的样式），包括一些样式属性还没有设置的默认值，其中null是获取该元素伪元素的样式表  
> \*\*d.\*\*返回的计算样式的值都是绝对值（例如：em会转换成px），因为在计算机中会把像素作为基本单位，对于计算机来说和其它单位相比较，px也就是绝对值。

> 3.什么是查询样式\[ele.currentStyle.prop\]？  
> 答：  
> \*\*a.\*\*IE独有的属性  
> \*\*b.\*\*只读不可写  
> \*\*c.\*\*返回的计算样式的值是没有经过转换的绝对值（之前是什么值，就获取到什么值）

上代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo</title>
    </head>
    <body>
    	
    	<script>
    	function getStyle(dom,attr){
    		if(dom.currentStyle){
    			return dom.currentStyle[attr]
    		}else{
    			return window.getComputedStyle(dom,null)[attr]
    		}
    	}
    
    	//封装getOrSetStyle()函数
    	function getOrSetStyle(dom,attr,value){
    		if(arguments.length == 2){//获取值
     			return getStyle(dom,attr);
    		}else if(arguments.length == 3){//设置属性
    			dom.style[attr] = value;
    		}
    	}
    	
    	</script>
    </body>
    </html>