简单的JS获取元素样式属性值的方法

简单的js获取元素样式属性值的方法

function attrstyle(elem,attr){
 if(elem.style[attr]){
  //若样式存在于html中,优先获取
  return elem.style[attr];
 }else if(elem.currentstyle){
  //ie下获取css教程属性最终样式(同于css优先级)
  return elem.currentstyle[attr];
 }else if(document.defaultview && document.defaultview.getcomputedstyle){
  //w3c标准方法获取css属性最终样式(同于css优先级)
  //注意,此法属性原格式(text-align)获取的,故要转换一下
  attr=attr.replace(/([a-z])/g,'-$1').tolowercase();
  //获取样式对象并获取属性值
  return document.defaultview.getcomputedstyle(elem,null).getpropertyvalue(attr);
 }else{
  return null;
 }
}

 获取元素样式在实际应用中一定常用到, 若是纯粹html中, 直接elem.style.attr就可获取, 但更多的时候我们是要从css中获取元素的最终样式属性.所以, 我们得利用ie的currentstyle和w3c的getpropertyvalue获取.
elem.style.attr获取样式的方法就不说了. 先来看currentstyle方法, 此对象ie专属, 代表了在全局样式表、内嵌样式和 html 标签属性中指定的对象格式和样式. ie下通过它, 就可以获取元素的css属性值.
而针对其他标准浏览器, w3c也提供了一个方法getpropertyvalue, 此方法, 稍有点复杂, 首先要通过document.defaultview.getcomputedstyle获得css的样式对象, 然后通过该对象的getpropertyvalue获取属性值.
上述两种方法, 无论ie还是w3c的, 有一点是相同的, 它们所获取的是元素css属性最终值. 这一点与css的优先级是相同的.