如何获得元素的渲染高度?
假设你有一个<div>元素,里面有一些内容。里面的内容将扩展<div>的高度。当你没有显式地设置高度时,你如何获得“渲染”的高度。显然,我尝试过:
var h = document.getElementById('someDiv').style.height;
这样做有什么诀窍吗?如果有帮助的话,我正在使用jQuery。
如何获得元素的渲染高度?
假设你有一个<div>元素,里面有一些内容。里面的内容将扩展<div>的高度。当你没有显式地设置高度时,你如何获得“渲染”的高度。显然,我尝试过:
var h = document.getElementById('someDiv').style.height;
这样做有什么诀窍吗?如果有帮助的话,我正在使用jQuery。
当前回答
offsetHeight,通常。
如果你需要计算一些东西,但不显示它,将元素设置为visibility:hidden和position:absolute,将它添加到DOM树,获取offsetHeight,然后删除它。(这就是上次我检查的原型库在幕后所做的工作)。
其他回答
offsetHeight,通常。
如果你需要计算一些东西,但不显示它,将元素设置为visibility:hidden和position:absolute,将它添加到DOM树,获取offsetHeight,然后删除它。(这就是上次我检查的原型库在幕后所做的工作)。
试一试:
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;
clientHeight包括高度和垂直填充。
offsetHeight包括高度、垂直填充和垂直边框。
scrollHeight包括所包含文档的高度(在滚动的情况下会大于高度)、垂直填充和垂直边框。
嗯,我们可以得到元素几何…
var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);
这个纯JS怎么样?
它应该只是
$('#someDiv').height();
与jQuery。这将以数字的形式检索换行集中第一项的高度。
尝试使用
.style.height
只有在您首先设置了该属性时才有效。不是很有用!
我做了一个简单的代码,甚至不需要JQuery,可能会帮助一些人。 它在加载后得到ID1的总高度并在ID2上使用它
function anyName(){
var varname=document.getElementById('ID1').offsetHeight;
document.getElementById('ID2').style.height=varname+'px';
}
然后设置主体来加载它
<body onload='anyName()'>