JS获取一个未知DIV高度的方法

本文旨在分享一种JavaScript技巧，用于获取未知DIV的高度，这对于动态操作页面元素属性来说是非常有价值的方法。如果你是一位热衷于JavaScript的前端开发者，那么这篇文章一定会引起你的兴趣。

我们可以通过元素的clientHeight属性来获取元素的高度。例如：

var height = element.clientHeight;

这种方法并非完美无缺。如果元素的display属性设置为none，那么你将得到的结果为0。在Safari浏览器中，你可能需要使用element.offsetHeight来获取实际高度，这是Safari浏览器的一个已知问题。

这里介绍一种由Prototype提供的方法，它能够在狼蚁网站SEO优化中得到广泛应用，兼容各种浏览器，甚至在元素隐藏的情况下也能正确得到元素尺寸。这个方法通过暂时改变元素的显示属性来获取其真实尺寸。具体代码如下：

getDimensions: function(element) {

element = $(element);

var display = $(element).getStyle('display');

if (display != 'none' && display != null) // Safari bug

return {width: element.offsetWidth, height: element.offsetHeight};

// 对于具有display属性为none的元素，其宽度和高度属性都会返回0

// 因此我们需要暂时改变元素的可见性和位置

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}; //返回包含元素原始尺寸的对象

}

如果你对JavaScript的其他主题也感兴趣，比如事件处理、DOM操作、AJAX技术等等，我们推荐你查看我们的专题文章。我们相信这篇文章能够帮助你更好地理解和应用JavaScript在程序设计中的实际应用。本文所述内容对大家在进行JavaScript开发时会有所帮助。更多精彩内容，请访问我们的网站进一步了解。

希望这篇文章能让你对JavaScript有更深入的了解和认识。如果你有任何问题或需要进一步的学习资源，请随时联系我们。我们也推荐你查看一些相关的JavaScript教程和书籍，以帮助你提升你的技能和理解。让我们一起学习、进步，成为更好的开发者！