用普通的JavaScript获取div高度
任何想法如何获得div的高度,而不使用jQuery?
我正在寻找堆栈溢出这个问题,似乎每个答案都指向jQuery的.height()
。
我尝试了类似myDiv.style.height
东西,但是它什么也没有返回,即使我的div的width
和height
用CSS设置的。
var clientHeight = document.getElementById('myDiv').clientHeight;
要么
var offsetHeight = document.getElementById('myDiv').offsetHeight;
clientHeight
包含填充。
offsetHeight
包括填充,滚动条和边框。
的jsfiddle
var element = document.getElementById('element'); alert(element.offsetHeight);
var myDiv = document.getElementById('myDiv'); //get #myDiv alert(myDiv.clientHeight);
clientHeight和clientWidth是你正在寻找的。
offsetHeight和offsetWidth也返回高度和宽度,但它包含边框和滚动条。 根据情况,你可以使用其中一个。
希望这可以帮助。
另一种select是使用getBoundingClientRect函数。 请注意,如果元素的显示是'none',getBoundingClientRect将返回一个空的矩形。
例:
var elem = document.getElementById("myDiv"); if(elem) { var rect = elem.getBoundingClientRect(); console.log(rect.height); }
<div id="item">show taille height</div> <script> alert(document.getElementById('item').offsetHeight); </script>
的jsfiddle
其他答案不适合我。 这是我在w3schools发现的。
所有你需要的是height
和width
来排除填充。
var height = document.getElementById('myDiv').style.height; var width = document.getElementById('myDiv').style.width;
这是假设div
有一个height
和/或width
设置。
这个答案已经帮助至less5个人,从我收到的upvotes来看。 如果你不喜欢,告诉我为什么我可以修复它。 那是我最大的宠爱, 很less有人告诉我他们为什么这样做。
- 如何在JavaScript中输出ISO 8601格式的string?
- JavaScript:客户端与服务器端validation
- JavaScript字符串换行符?
- NodeJS / Express中的“module.exports”和“exports.methods”是什么意思?
- 为什么我的微调GIF停止,而jQuery的Ajax调用正在运行?
- JavaScript中反向符号(`)的用法是什么?
- window.onload与body.onload与document.onready
- (函数(x,y){…})(a,b)是什么? 在JavaScript中的意思是?
- 在内存中创build一个文件供用户下载,而不是通过服务器