无法计算元素的宽度

时间:2010-06-02 09:50:43

标签: javascript html

我尝试获取DOM对象的宽度:

    function resizeArea(){
      var width = 0;
      area.children().each(function(i){
          alert(this.offsetWidth);
          width += this.offsetWidth;
      });
      area.css('width', width);
    }

获得结果:

  1. Chrome:800
  2. Opera:708
  3. FF:783
  4. IE:714
  5. 但如果在firebug,dragonfly和其他调试器中看到它,我看到正确的908px。 我不知道哪里有问题。我在domloaded之后运行这个乐趣。

    以下是块的HTML和css:

    <div class="scroll_area" id="scroll">
       <div class="area" id="area">
          <div class="category">
          [..]
          </div>
       </div>
     </div>
     <style>
        #scroll {
            position:realtive; width: 800px, heght: 400px;
       }
       #area {
            position:absolute; left: 0; top: 0;
       }
       #area .category, #area .category .text, #area .category .image{
           width: 200px
       }
     </style>
    

    那很有意思。此功能以后只能在第一次运行时正确工作,才能进行首次计算。

1 个答案:

答案 0 :(得分:0)

我设法让这个工作(使用jQuery): 如果我误解了这个问题,请告诉我

<!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>
 <style type="text/css">
    #scroll {
        position:realtive; width: 800px, heght: 400px;
   }
   #area {
        position:absolute; left: 0; top: 0;
   }
   #area div.category {
       width: 200px;
       display: block;
   }
 </style>
 <script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript" language="Javascript"></script>
 <script type="text/javascript">
 function resizeArea(){
      var width = 0;
      jQuery("#area").children().each(function(i){
          alert(this.offsetWidth);
          width += this.offsetWidth;
      });
      jQuery("#area").css('width', width);
    }
 </script>
</head>
<body>
<div class="scroll_area" id="scroll">
   <div class="area" id="area">
      <div class="category">
      [..]FIRST ALERT
      </div>
      <div class="category">
      [..]SECOND ALERT
      </div>
   </div>
 </div>
 <script type="text/javascript">resizeArea();</script>

 <br /><br /><br /><a href="javascript:void(0);" onClick="resizeArea()">Fun Function Again</a>
</body>
</html>