js宽度和高度赋值在ie和Chrome/Firefox中的区别

在编写 Javascript 代码时，仅把数值赋给某个对象的高度或宽度，你会发现：在 ie 中有效，而在 Chrome 和 Firefox 等遵从 W3C 标准的浏览器却无效，必须加上 px。具体情况举例说明。

1、图片高度和宽度不能超过某个规定数值

<div id="test1">
    <img src="/images/logo.gif" alt="亮术网" />
    <img src="/images/ads.gif" alt="网页打不开" />
  </div>

<script type="text/javascript">
  function setImg_H_W(height, width){
    var obj = document.getElementById("test1");
    var imgs = obj.getElementsByTagName("img");

  for(var i = 0;i < imgs.length;i++){
      //imgs[i].height = height; //ie 有效，Chrome 和 Firefox 无效
      imgs[i].height = height + 'px'; //ie、Chrome 和 Firefox 都有效

    //imgs[i].width = width;//ie 有效，Chrome 和 Firefox 无效
      imgs[i].width = width + 'px';//ie、Chrome 和 Firefox
    }

}
  setImg_H_W(700, 600);
  </script>

注意：上例中并没有根据传入的值实现按比例缩放，如果想按比例缩放请看《完美、高效解决IE6图片按比例缩小》一文，里面有详细实现。

2、根据屏幕宽度确定 iframe 的宽度

<div id="leftMenu">
    <ul id="test1">
      <li>ie网页打不开</li>
      <li>火狐网页打不开</li>
      <li>360网页打不开</li>
    </ul>
  </div>
  <div id="right">
    <iframe id="ifr" onload="this.height=ifr.document.body.scrollHeight" width="100%" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" src="index.htm"></iframe>
  </div>

<script type="text/javascript">
  function setWidth(width){
    //document.getElementById("right").style.width = document.body.scrollWidth - width; //ie 有效，Chrome 和 Firefox 无效
    document.getElementById("right").style.width = document.body.scrollWidth - width + 'px';//ie、Chrome 和 Firefox 都有效
  }
  setWidth(200);
  </script>

除了上面举的例子，凡是涉及到对象高度和宽度赋值的都不能少 px，尤其是几个数值计算完之后，不要忘了在后面加上 px。