用js无法获取style样式的问题解析与解决方法

　　今天在写js获取style样式的时候遇到了一个小问题，即用以下的代码获取不到id为“qqChat”div的一些样式：

function $(id){

 return documentElementById(id);

}

var qL = $("qqChat").style.left;

alert(qL);//结果为空

　　仔细检查代码，div框的top，left值也定义了啊，为什么就获取不到呢？随搜索之。终于发现了问题所在：

　　js只能修改html内部的css样式代码。

　　在JavaScript中，通过document.getElementById(id).style.XXX可以获取到XXX的值，但意外的是这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。

　　原来是我把样式写到了head中。但是一般不把样式写成行内样式的，所以得找到解决的办法。随继续寻找之。功夫不负有心人，终于找到了解决方法：

　　如果是ie，问题很好解决，只要把style改成currentStyle即可。即：

function $(id){

 return documentElementById(id);

}

var qL = $("qqChat").currentStyle.left;

alert(qL);//结果有值

　　而在firefox下，则采用另外一种方式：

function $(id){

 return documentElementById(id);

}

var qL = document.defaultView.getComputedStyle($("qqChat"),null)

var qLL = qL.left;

alert(qLL);//结果有值

 　　综合IE和Firefox之后解决办法如下：

function $(id)

{

 return document.getElementById(id);

}

function checkStyle(o){

 if(o.currentStyle){

  var cur = o.currentStyle;

}else{

  var cur =  document.defaultView.getComputedStyle(o, null);

}

  return cur;

}

var one = checkStyle($("qqChat"));

alert(one.left);//有值

 

转自:http://www.17leba.com