JS 脚本化CSS 之 获取dom元素样式（解决兼容性问题）

脚本化 == 控制

获取dom元素计算样式（只读）IE8及IE8以下不兼容

window.getComputedStyle(ele,null);

返回一个 封装dom元素或其伪元素所有CSS属性的显示值（包括默认值） 的类数组

• 第一个参数：要获取计算样式的dom元素
• 第二个参数：第一个参数指定的dom元素上的伪元素，可为null

获取指定dom元素的计算样式表

获取指定dom元素上的伪元素的计算样式表

div::after{
  content: "";
  width: 50px;
  height: 50px;
  background-color: gold;
  display: inline-block;
}

window.getComputedStyle(ele,null).prop;

获取dom元素指定的CSS属性的显示值（包括默认值）

window.getComputedStyle(ele,'after/before').prop;

获取dom元素上的伪元素指定的CSS属性的显示值（包括默认值）

返回的计算样式的值都是绝对值，没有相对值（如%、em、相对的 颜色等）

div{
  width: 10em;
}
<div  style="height: 50%;background-color: orange;"></div>

获取dom元素样式（只读） ---- IE独有的属性

ele.currentStyle 返回一个 封装dom元素所有CSS属性的显示值（包括默认值） 的类数组

ele.currentStyle.prop 获取dom元素指定的CSS属性的显示值（包括默认值）

返回的计算样式的值不会经过转换，是相对值就是相对值，是绝对值就是绝对值

封装兼容性工具方法getStyle(elem,prop);获取dom元素样式

function getStyle(elem,prop){
   if(window.getComputedStyle){
     return window.getComputedStyle(elem,null)[prop];
   }else{
     return elem.currentStyle[prop];
   }
 }