如何检索HTML元素的实际宽度和高度?

假设我有一个<div>，我希望它位于浏览器显示(视口)的中央。为此，我需要计算<div>元素的宽度和高度。

我应该用什么?请包括浏览器兼容性信息。

当前回答

注:这个答案写于2008年。当时，对于大多数人来说，最好的跨浏览器解决方案就是使用jQuery。我把答案留给后人，如果您正在使用jQuery，这是一个很好的方法。如果您正在使用其他框架或纯JavaScript，那么接受的答案可能是正确的。

从jQuery 1.2.6开始，你可以使用CSS的核心函数之一，height和width(或者outerHeight和outerWidth，视情况而定)。

var height = $("#myDiv").height();
var width = $("#myDiv").width();

var docHeight = $(document).height();
var docWidth = $(document).width();

2008-11-16 19:29:19

其他回答

修改元素的样式很容易，但读取值有点棘手。

JavaScript不能读取任何来自css(内部/外部)的元素样式属性(element .style)，除非你在JavaScript中使用内置方法调用getComputedStyle。

getComputedStyle(元素(伪)

元素:要读取其值的元素。伪元素，如果需要，例如::before。空字符串或无参数表示元素本身。

结果是一个具有样式属性的对象，如elem。样式，但现在是关于所有CSS类。

例如，这里的样式看不到页边距:

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

  <script>
    let computedStyle = getComputedStyle(document.body);

    // now we can read the margin and the color from it

    alert( computedStyle.marginTop ); // 5px
    alert( computedStyle.color ); // rgb(255, 0, 0)
  </script>

</body>

因此，修改javaScript代码以包含您希望获取其宽度/高度或其他属性的元素的getComputedStyle

window.onload = function() {

    var test = document.getElementById("test");
    test.addEventListener("click", select);


    function select(e) {                                  
        var elementID = e.target.id;
        var element = document.getElementById(elementID);
        let computedStyle = getComputedStyle(element);
        var width = computedStyle.width;
        console.log(element);
        console.log(width);
    }

}

计算和解析值

CSS中有两个概念:

计算出的样式值是所有CSS规则和CSS之后的值继承被应用，作为CSS级联的结果。它看起来比如高度:1em或字体大小:125%。已解析的样式值是最终应用于元素的样式值。 1em或125%这样的值是相对的。浏览器接受计算结果值并使所有单位固定和绝对，例如: 高度:20px或字体大小:16px。用于几何属性解析值可以有一个浮点数，比如width:50.5px。

很久以前创建了getComputedStyle来获取计算值，但后来发现解析值要方便得多，因此标准发生了变化。现在getComputedStyle实际上返回属性的解析值。

请注意:

getComputedStyle需要完整的属性名

你应该总是要你想要的东西，比如左，高，宽。否则正确的结果不保证。例如，如果有属性paddingLeft/paddingTop，那么我们应该为getComputedStyle(elem).padding获取什么?什么,或也许是从已知填充中“生成”的值?没有标准规则在这里。

还有其他不一致之处。例如，一些浏览器(Chrome)在下面的文档中显示10px，而其中一些(Firefox) -不显示:

<style>
  body {
    margin: 30px;
    height: 900px;
  }
</style>
<script>
  let style = getComputedStyle(document.body);
  alert(style.margin); // empty string in Firefox
</script>

更多信息https://javascript.info/styles-and-classes

2018-04-27 11:58:34

．.．看起来CSS有助于把div放在中心…

<style>
 .monitor {
 position:fixed;/* ... absolute possible if on :root */
 top:0;bottom:0;right:0;left:0;
 visibility:hidden;
 }
 .wrapper {
 width:200px;/* this is size range */
 height:100px;
 position:absolute;
 left:50%;top:50%;
 visibility:hidden;
 }

 .content {
 position:absolute;
 width: 100%;height:100%;
 left:-50%;top:-50%;
 visibility:visible;
 }

</style>

 <div class="monitor">
  <div class="wrapper">
   <div class="content">

 ... so you hav div 200px*100px on center ...

  </div>
 </div>
</div>

2012-03-01 00:21:40

从jQuery 1.2.6开始，你可以使用CSS的核心函数之一，height和width(或者outerHeight和outerWidth，视情况而定)。

var height = $("#myDiv").height();
var width = $("#myDiv").width();

var docHeight = $(document).height();
var docWidth = $(document).width();

2008-11-16 19:29:19

看一下Element.getBoundingClientRect()。

这个方法将返回一个包含宽度、高度和其他一些有用值的对象:

{
    width: 960,
    height: 71,
    top: 603,
    bottom: 674,
    left: 360,
    right: 1320
}

例如:

var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;

我相信这没有.offsetWidth和.offsetHeight的问题，它们有时返回0(如在这里的评论中讨论的那样)

另一个区别是getBoundingClientRect()可能返回分数像素，其中. offsetwidth和. offsetheight将四舍五入到最近的整数。

注意:getBoundingClientRect在IE8及以下不返回高度和宽度

如果你必须支持IE8，使用.offsetWidth和.offsetHeight:

var height = element.offsetHeight;
var width = element.offsetWidth;

值得注意的是，该方法返回的对象并不是真正的普通对象。它的属性是不可枚举的(例如，Object。钥匙不能开箱即用。)

更多信息请点击这里: 如何最好地将一个ClientRect / DomRect转换为一个普通对象

参考:

.offsetHeight: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight .offsetWidth: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth .getBoundingClientRect (): https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

2015-09-18 18:37:04

这是唯一对我有效的方法:

element.clientWidth -
parseFloat(window.getComputedStyle(element, null).getPropertyValue("padding-left")) -
parseFloat(window.getComputedStyle(element, null).getPropertyValue("padding-right"))

2022-01-25 16:47:49

如何检索HTML元素的实际宽度和高度?

推荐文章

最新文章

标签