375

关于如何在不使用 jQuery 的情况下获得 div 的高度的任何想法？

我在 Stack Overflow 上搜索这个问题，似乎每个答案都指向 jQuery 的.height().

我尝试了类似的东西myDiv.style.height，但它什么也没返回，即使我的 div 有它width并height在 CSS 中设置。

4

12 回答 12

693 
var clientHeight = document.getElementById('myDiv').clientHeight;

或者

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight包括填充。

offsetHeight包括内边距、滚动条和边框。

于 2013-03-25T13:05:33.123 回答
36

另一种选择是使用 getBoundingClientRect 函数。请注意，如果元素的显示为“无”，getBoundingClientRect 将返回一个空矩形。

例子：

var elem = document.getElementById("myDiv");
if(elem) {
  var rect = elem.getBoundingClientRect();
  console.log("height: " + rect.height);  
}

更新：这是 2020 年编写的相同代码：

const elem = document.querySelector("#myDiv");
if(elem) {
  const rect = elem.getBoundingClientRect();
  console.log(`height: ${rect.height}`);
}
于 2017-08-05T00:45:42.433 回答
25

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);
于 2013-03-25T12:59:27.057 回答
12 
var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

clientHeight 和 clientWidth 是您正在寻找的。

offsetHeight 和 offsetWidth 也返回高度和宽度，但它包括边框和滚动条。根据情况，您可以使用其中一种。

希望这可以帮助。

于 2013-03-25T12:59:52.250 回答
4

除了el.clientHeight和之外el.offsetHeight，当您需要元素内部内容的高度时（无论元素本身设置的高度如何），您都可以使用el.scrollHeight. 更多信息

如果您想将元素高度或最大高度设置为其内部动态内容的确切高度，这将很有用。例如：

var el = document.getElementById('myDiv')

el.style.maxHeight = el.scrollHeight+'px'
于 2019-03-13T17:32:53.980 回答
4

其他答案对我不起作用。这是我在w3schools找到的，假设div有一个height和/或width设置。

您所需要的只是height排除width填充。

    var height = document.getElementById('myDiv').style.height;
    var width = document.getElementById('myDiv').style.width;

你们反对者：从我收到的赞成票来看，这个答案至少帮助了 5 人。如果您不喜欢它，请告诉我原因，以便我可以修复它。那是我对投票的最大不满；你很少告诉我你为什么不投票。

于 2015-08-13T21:52:31.523 回答
3

尝试

myDiv.offsetHeight 


console.log("Height:", myDiv.offsetHeight );
#myDiv { width: 100px; height: 666px; background: red}
<div id="myDiv"></div>

于 2019-04-17T04:57:21.553 回答
2

这是另一种选择：

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;
        }

    }
于 2019-06-14T17:48:10.680 回答
2

一种选择是

const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);
于 2019-12-19T17:39:20.470 回答
1 
<div id="item">show taille height</div>
<script>
    alert(document.getElementById('item').offsetHeight);
</script>

提琴手

于 2016-12-06T10:30:08.110 回答
1

最好的办法是——

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>

于 2021-10-07T02:54:24.960 回答
0

javascript高度计算

包括填充

利用clientHeight

element.clientHeight

利用offsetHeight

包括填充，边框，border_width

element.offsetHeight

利用el.style.height

它仅返回给定高度（必须具有手动高度，例如：<div style="height:12px"></div>否则返回空结果

element.style.height

利用getBoundingClientRect

包括填充，边框，border_width

elem.getBoundingClientRect();
elem.height
于 2021-04-05T18:17:36.390 回答