封装一个兼容性方法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>
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
