如何获得元素的渲染高度?
假设你有一个<div>元素,里面有一些内容。里面的内容将扩展<div>的高度。当你没有显式地设置高度时,你如何获得“渲染”的高度。显然,我尝试过:
var h = document.getElementById('someDiv').style.height;
这样做有什么诀窍吗?如果有帮助的话,我正在使用jQuery。
如何获得元素的渲染高度?
假设你有一个<div>元素,里面有一些内容。里面的内容将扩展<div>的高度。当你没有显式地设置高度时,你如何获得“渲染”的高度。显然,我尝试过:
var h = document.getElementById('someDiv').style.height;
这样做有什么诀窍吗?如果有帮助的话,我正在使用jQuery。
当前回答
MooTools:
$ (' someDiv ') .getSize .y ()
其他回答
我用它来获取一个元素的高度(返回浮点数):
document.getElementById('someDiv').getBoundingClientRect().height
当您使用虚拟DOM时,它也可以工作。我在Vue中这样使用它:
this.$refs['some-ref'].getBoundingClientRect().height
对于Vue组件:
this.$refs['some-ref'].$el.getBoundingClientRect().height
你在css中设置高度了吗?如果你没有,你需要使用offsetHeight;而不是身高
var h = document.getElementById('someDiv').style.offsetHeight;
style = window.getComputedStyle(your_element);
然后简单地:style.height
它应该只是
$('#someDiv').height();
与jQuery。这将以数字的形式检索换行集中第一项的高度。
尝试使用
.style.height
只有在您首先设置了该属性时才有效。不是很有用!
试一试:
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;
clientHeight包括高度和垂直填充。
offsetHeight包括高度、垂直填充和垂直边框。
scrollHeight包括所包含文档的高度(在滚动的情况下会大于高度)、垂直填充和垂直边框。