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

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

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

当前回答

你也可以使用下面的代码:

var divID = document.getElementById("divid");

var h = divID.style.pixelHeight;

2009-03-25 11:24:32

其他回答

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.clientWidth -
parseFloat(window.getComputedStyle(element, null).getPropertyValue("padding-left")) -
parseFloat(window.getComputedStyle(element, null).getPropertyValue("padding-right"))

2022-01-25 16:47:49

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

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

2015-03-04 14:12:30

你也可以使用下面的代码:

var divID = document.getElementById("divid");

var h = divID.style.pixelHeight;

2009-03-25 11:24:32

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

推荐文章

最新文章

标签