当display=none时,元素和子元素高度为0的解决办法

时间:2022-06-28 06:49:36

在前端中为了某种需要,我们需要获取display=none的元素或者子元素的实际高度来进行某些处理,然而html对display=none的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那么它们的高度都会是0,就算元素中有文字或者其它内容。

解决办法:
通过jquery的show方法先展示出来,再在回调函数中获取它们的高度并操作即可,代码如下:
$(".box").show(0,function(){
  var h = $(".box").outerHeight();
  console.log(h);
})

这样我们就可以获取到box的实际高度了。