学生哥 发表于 2008-6-13 11:31

怎样获得一个不能预知高度的DIV的高度?

例如有这样一个DIV:

<div id="someDiv" style="width:50%"><!--这里面包含一段文字--></div>

这个DIV只设定了宽度,高度根据内容的多少自动调整.应该怎样用javascript来获得这个DIV 的高度呢?

试过这样写:
<script type="text/javascript">
var d=document.getElementById("someDiv");
document.write(d.style.height);
</script>

结果什么也不能输出.

请各位指点一下.谢谢.

hugeannex 发表于 2008-6-14 13:13

[code]<div id="someDiv" style="width:50%">这里面包含一段文字</div>
<script type="text/javascript">
var d=document.getElementById("someDiv");
document.write(d.offsetHeight);
</script>[/code]

lixingwen 发表于 2008-6-20 21:28

这样能行吗？

kingyar 发表于 2008-6-21 07:52

简单的方法：
通过元素的clientHeight属性能够得到元素的高度,如：
var height = element.clientHeight;

这种做法的局限：
1. 如果元素的display属性设置为none, 那么得到的结果为0
2. 在safari浏览器中，需要使用：element.offsetHeight得到实际高度，这是safari浏览器的bug

下面是Prototype提供的方法，能够兼容各种浏览器，同时在元素隐藏的情况下也能正确得到元素尺寸，供参考：
getDimensions: function(element) {
    element = $(element);
    var display = $(element).getStyle('display');
    if (display != 'none' && display != null) // Safari bug
      return {width: element.offsetWidth, height: element.offsetHeight};

    // All *Width and *Height properties give 0 on elements with display none,
    // so enable the element temporarily
    var els = element.style;
    var originalVisibility = els.visibility;
    var originalPosition = els.position;
    var originalDisplay = els.display;
    els.visibility = 'hidden';
    els.position = 'absolute';
    els.display = 'block';
    var originalWidth = element.clientWidth;
    var originalHeight = element.clientHeight;
    els.display = originalDisplay;
    els.position = originalPosition;
    els.visibility = originalVisibility;
    return {width: originalWidth, height: originalHeight};
  }

另外，在这里有Prototype详细教程与参考手册：http://web.kingyar.com

[[it] 本帖最后由 kingyar 于 2008-6-21 07:56 编辑 [/it]]

页: [1]

编程论坛