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

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

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

当前回答

根据MDN:确定元素的尺寸

offsetWidth和offsetHeight返回“一个元素占用的空间总量，包括可见内容的宽度、滚动条(如果有的话)、填充和边框”

clientWidth和clienttheight返回“实际显示内容占用的空间大小，包括填充，但不包括边框、页边距或滚动条”

scrollWidth和scrollHeight返回“内容的实际大小，不管当前有多少可见”

因此，这取决于所测量的内容是否预计在当前可视区域之外。

2018-03-01 20:38:01

其他回答

如果offsetWidth返回0，你可以获取元素的样式宽度属性并搜索一个数字。100px -> 100

/ \ d * / .exec (MyElement.style.width)

2015-03-04 14:12:30

Flex

如果你想在<div>中显示屏幕中心的某种弹出消息，那么你不需要读取<div>的大小，但你可以使用flex

.box { 宽度:50 px; 高度:20 px; 背景:红色; ｝ .container { 显示:flex; justify-content:中心; 对齐项目:中心; 身高:100 vh; 宽度:100大众; 位置:固定;/*如果div下没有内容，则删除它(并且记住将正文边距设置为0)*/ ｝ < div class = "容器" > <div class="box">我的div</div> < / div >

2020-08-19 20:39:58

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

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

看一下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

你只需要为IE7和更老版本计算它(只有当你的内容没有固定大小时)。我建议使用HTML条件注释来限制攻击不支持CSS2的旧ie。对于所有其他浏览器使用这个:

<style type="text/css">
    html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
    body {display:table-cell; vertical-align:middle;}
    div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>

这是一个完美的解决方案。它将任何大小的<div>居中，并将其收缩到其内容的大小。

2008-11-16 20:57:23

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

推荐文章

最新文章

标签