clientHeight返回零

Question

我正在使用JavaScript动态创建DOM元素。我需要获得一个div的高度来做滑动动画。但是当我使用clientHeight时，它总是返回0. offsetHeight也会这样做。当我尝试console.log（）时，我得到了div。所以它不是因为元素没有加载到DOM中。最初我设置样式display：none，div隐藏它。这是问题的原因吗？请有人帮助我。

document.getElementsByClassName('myDiv')[0].parentNode.children[1].clientHeight;

我尝试了下面的代码来避免display：none的问题。还是clientHeight返回0。

if(obj.style.display == "none"){ // if it's allready hidden we slide it down
   obj.style.visibility = "hidden";
   obj.style.display = "block";
   height = obj.offsetHeight;
   obj.style.visibility = "visible";
   slideDown(obj,0,height,Math.ceil(height/timeToSlide));
} 

Answer 1

使用display:none设置样式的元素将为其维度注册0。请尝试申请：

div.myClass { position:absolute; left:-999em; }

效果相同，但您的div仍有其尺寸。

Answer 2

您需要附加才能知道宽度...您可以使用不透明度隐藏内容以满足您的需求。

Example

CSS

.hidden {opacity: 0;}

或者您可以使用Chis Hardie置换解决方案。

Answer 3

如果你使用jQuery，你可以得到这样的高度。

$(document.getElementsByClassName('myDiv')[0].parentNode.children[1]).height()