关于如何不使用jQuery获得div的高度有什么想法吗?
我在Stack Overflow中搜索这个问题,似乎每个答案都指向jQuery的.height()。
我尝试了myDiv.style。但是它没有返回任何东西,即使我的div在CSS中设置了它的宽度和高度。
关于如何不使用jQuery获得div的高度有什么想法吗?
我在Stack Overflow中搜索这个问题,似乎每个答案都指向jQuery的.height()。
我尝试了myDiv.style。但是它没有返回任何东西,即使我的div在CSS中设置了它的宽度和高度。
当前回答
这里还有一个选择:
var classElements = document.getElementsByClassName("className");
function setClassHeight (classElements, desiredHeightValue)
{
var arrayElements = Object.entries(classElements);
for(var i = 0; i< arrayElements.length; i++) {
arrayElements[i][1].style.height = desiredHeightValue;
}
}
其他回答
最好的办法是——
var myDiv = document.getElementById('myDiv'); var myDivWidth = myDiv.clientWidth || myDiv.offsetWidth || (myDiv.getBoundingClientRect()).width; var myDivHeight= myDiv.clientHeight || myDiv.offsetHeight || (myDiv.getBoundingClientRect()).height; console.log("Width: "+ myDivWidth + "px"); console.log("Height: "+ myDivHeight + "px"); <div style="padding: 50px; margin: 8px auto; outline: 1px solid green;"> <div id="myDiv" style="width: 100%; height: 256px; padding: 50px; margin: 4px; background: #000000; color: #ffffff; outline: 1px solid red;"> This is "#myDiv" <br> Width: 100% <br> Height: 256px </div> </div>
HTMLElement。返回已定义的元素样式 clientHeight -高度+填充 offsetHeight -高度+填充+边框 scrollHeight -返回高度+填充 getBoundingClientRect() -返回左,上,右,下,x, y, 宽度和高度属性 getComputedStyle() -返回元素的所有CSS属性
// returns defined Style of element const styleHeight = document.getElementById('myDiv').style.height; console.log('style Height : ', styleHeight); // height + padding const clientHeight = document.getElementById('myDiv').clientHeight; console.log('client Height : ', clientHeight); // height + padding + borders const offsetHeight = document.getElementById('myDiv').offsetHeight; console.log('offset Height : ', offsetHeight); // height + padding const scrollHeight = document.getElementById('myDiv').scrollHeight; console.log('scroll Height : ', scrollHeight); // return left, top, right, bottom, x, y, width, and height properties const getBoundingClientRectHeight = document.getElementById('myDiv').getBoundingClientRect().height; console.log('get Bounding Client Rect Height : ', getBoundingClientRectHeight); // returns all CSS properties of an element const styleElementHeight = getComputedStyle(document.getElementById("myDiv")).height; console.log('style Element Height : ', styleElementHeight); <div id="myDiv" style="margin:10px;padding:20px;height:200px;"> <input type="Text"> <input type="button" value="submit"> </div>
<div id="item">show taille height</div>
<script>
alert(document.getElementById('item').offsetHeight);
</script>
杰斯菲德尔
这里还有一个选择:
var classElements = document.getElementsByClassName("className");
function setClassHeight (classElements, desiredHeightValue)
{
var arrayElements = Object.entries(classElements);
for(var i = 0; i< arrayElements.length; i++) {
arrayElements[i][1].style.height = desiredHeightValue;
}
}
其他答案对我不起作用。下面是我在w3schools找到的,假设div有一个高度和/或宽度设置。
你所需要的是高度和宽度来排除填充。
var height = document.getElementById('myDiv').style.height;
var width = document.getElementById('myDiv').style.width;
不看好你的人:从我收到的好评来看,这个答案至少帮助了5个人。如果你不喜欢,告诉我原因,我好弥补。这是我对反对票最大的不满;你很少告诉我你为什么投反对票。