虽有在CSS中定义div标签的WIDTH样式，为什么用js取不出来相应的值？？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档 </title> 
<style type="text/css"> 
div#aa div{WIDTH:300px; HEIGHT:200px; background:#ff0000;margin:10px}
div#aa .classa{WIDTH:200px; HEIGHT:80px;background:#f6b3ad}
div#aa .classb{WIDTH:100px; HEIGHT:60px;background:#f6b3ad}
</style> 
</head> 
<body> 
 <div id="aa" style="WIDTH:800px; HEIGHT:500px;background:#808000">
     <div id="aa1">
          <div class="classa"></div>
          <div class="classb"></div>
      </div>        <div id="aa2"> 
          <div class="classa"></div>
          <div class="classb"></div>
     </div>
<script language="javascript"> 
var mydiv = document.getElementById('aa2'); 
var xxx=mydiv.getElementsByTagName("div");
for(var j=0; j<kkk.length; j++)
{
if(xxx[j].currentStyle) {alert(xxx[j].currentStyle['WIDTH'])} 
else if(window.getComputedStyle) {alert(window.getComputedStyle(xxx[j], null)['WIDTH'])} 
}
</script> 
</body> 
</html>
//虽有在CSS中定义div标签的WIDTH样式，为什么用js取不出来相应的值？？ 

解决方案 »

  1.   

     <div id="aa" style="WIDTH:800px; HEIGHT:500px;background:#808000">
      <div id="aa1">
      <div class="classa"></div>
      <div class="classb"></div>
      </div>  
      </div>这里少个关闭这一段的div根本没有关闭.楼主检查一下for(var j=0; j<kkk.length; j++) kkk是什么？？？？
      

  2.   

    xxx[j].currentStyle['WIDTH']  
    xxx[j].currentStyle.width
      

  3.   

    IE8 可行<style type="text/css">  
    div#aa div{WIDTH:300px; HEIGHT:200px; background:#ff0000;margin:10px}
    div#aa .classa{WIDTH:200px; HEIGHT:80px;background:#f6b3ad}
    div#aa .classb{WIDTH:100px; HEIGHT:60px;background:#f6b3ad}
    </style>  
    </head>  
    <body>  
     <div id="aa" style="WIDTH:800px; HEIGHT:500px;background:#808000">
      <div id="aa1">
      <div class="classa"></div>
      <div class="classb"></div>
      </div>   
      <div id="aa2">  
      <div class="classa"></div>
      <div class="classb"></div>
      </div>
     </div><!-- 这里要封闭 -->
    <script language="javascript">
    var mydiv = document.getElementById('aa2');  
    var xxx=mydiv.getElementsByTagName("div");
    for(var j=0; j<xxx.length; j++) //这里应该是xxx不是kkk
    {
    if(xxx[j].currentStyle) {alert(xxx[j].currentStyle.width)}  //这里用currentStyle.width
    else if(window.getComputedStyle) {alert(window.getComputedStyle(xxx[j], null).width)}  
    }
    </script>  
      

  4.   

    谢谢各位了，但是把width换成background要提取background的值为什么就不行了？
    也就是:
    上部分代码相同,下面代码中的width换成background就不行了?
    {
        if(xxx[j].currentStyle) {alert(xxx[j].currentStyle.background)}     else if(window.getComputedStyle) {alert(window.getComputedStyle(xxx[j], null).background)}  
    }
      

  5.   


        if(xxx[j].currentStyle) {alert(xxx[j].currentStyle.backgroundColor)}  //这里用currentStyle.backgroundColor
        else if(window.getComputedStyle) {alert(window.getComputedStyle(xxx[j], null).backgroundColor)}  
      

  6.   

    background包含很多信息的color Any of the range of color values available to the backgroundColor property.   
    image Any of the range of image values available to the backgroundImage property. 
    repeat Any of the range of repeat values available to the backgroundRepeat property. 
    attachment Any of the range of attachment values available to the backgroundAttachment property. 
    position Any of the range of position values available to the backgroundPosition property. 
    写在一起的默认值是：background: transparent none repeat scroll 0% 0%
    要取背景色就写具体的 backgroundColor 了
      

  7.   

    还是这一个，在IE时没问题，可以在FOX里弹出的是RGB格式，我找了个函数想转成带#号的16进制的为什么不行呢？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <script language="javascript"> 
    function toHexColor(rgbColor) {
        var re = /^rgb/i,
            reExtract = /^rgb\((\d+),(\d+),(\d+)\)/gi;
        var hexRGB = "#", temp;
        if(re.test(rgbColor)) {
            reExtract.exec(rgbColor);
            temp = parseInt(RegExp.$1);
            hexRGB += temp < 16? "0" + temp.toString(16): temp.toString(16);
            temp = parseInt(RegExp.$2);
            hexRGB += temp < 16? "0" + temp.toString(16): temp.toString(16);
            temp = parseInt(RegExp.$3);
            hexRGB += temp < 16? "0" + temp.toString(16): temp.toString(16); 
            rgbColor = hexRGB;
        }
        return rgbColor;
    }</script> 
    <title>无标题文档 </title> 
    <style type="text/css"> 
    div#aa div{WIDTH:300px; HEIGHT:200px; background:#ff0000;margin:10px}
    div#aa .classa{WIDTH:200px; HEIGHT:80px;background:#f6b3ad}
    div#aa .classb{WIDTH:100px; HEIGHT:60px;background:#f6b3ad}
    </style> 
    </head> 
    <body> 
     <div id="aa" style="WIDTH:800px; HEIGHT:500px;background:#808000">
         <div id="aa1">
              <div class="classa"></div>
              <div class="classb"></div>
          </div>        <div id="aa2"> 
              <div class="classa"></div>
              <div class="classb"></div>
         </div></div>
    <script language="javascript"> 
    var mydiv = document.getElementById('aa2'); 
    var xxx=mydiv.getElementsByTagName("div");
    for(var j=0; j<xxx.length; j++)
    {
     if(xxx[j].currentStyle) {alert(xxx[j].currentStyle.backgroundColor)}  
        else if(window.getComputedStyle) {var yyy=window.getComputedStyle(xxx[j], null).backgroundColor;alert(toHexColor(yyy));}  
    }</script> 
    </body> 
    </html>
      

  8.   

    <div id="aa" style="position:absolute;WIDTH:800px; HEIGHT:500px;background:#808000">
      <div id="aa1">
      <div class="classa"></div>
      <div class="classb"></div>
      </div>   
      </div>这里少个关闭这一段的div根本没有关闭.楼主检查一下
      

  9.   

    应该是head里转换函数里rgbcolor要求有空格而body输出里的rgbcolor没有空格，所以不能通用，但这个转换函数我看不太懂，不知道怎么改成一致？
      

  10.   

    只改了这个函数加了注释的那一行
    看看行了不？<script language="javascript">  
    function toHexColor(rgbColor) {
    //alert(rgbColor)
      var re = /^rgb/i,
      reExtract = /^rgb\((\d+),\s(\d+),\s(\d+)\)/gi; //正则表达式中\s代表空格
      var hexRGB = "#", temp;
      if(re.test(rgbColor)) {
      reExtract.exec(rgbColor);
      temp = parseInt(RegExp.$1);
      hexRGB += temp < 16? "0" + temp.toString(16): temp.toString(16);
      temp = parseInt(RegExp.$2);
      hexRGB += temp < 16? "0" + temp.toString(16): temp.toString(16);
      temp = parseInt(RegExp.$3);
      hexRGB += temp < 16? "0" + temp.toString(16): temp.toString(16);  
      rgbColor = hexRGB;
      }
      return rgbColor;
    }
    </script>  
      

  11.   

    一个值可以，第二个值依然是#NaNNaNNaN
      

  12.   

    还是只改了有注释的那一行如果为正则表达式设置了全局标志，exec 从以 lastIndex 的值指示的位置开始查找。如果没有设置全局标志，exec 忽略 lastIndex 的值，从字符串的起始位置开始搜索。第一次调用函数执行 exec 后设置了lastIndex 值，所以第二次就不是从头开始搜索了。去掉就好了
      reExtract = /^rgb\(\s?(\d+),\s?(\d+),\s?(\d+)\)/i; //去掉了全局标记g