<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>
1028
NOTE ：这个答案写于2008年 . 当时大多数人最好的跨浏览器解决方案就是使用jQuery . 我'm leaving the answer here for posterity and, if you'重新使用jQuery，这是一个很好的方法 . 如果您正在使用其他框架或纯JavaScript，那么接受的答案可能就是您的选择 .
Element: 要读取值的元素 . pseudo: 如果需要，则为伪元素，例如:: before . 空字符串或无参数表示元素本身 .
结果是一个具有样式属性的对象，如elem.style，但现在关于所有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>
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);
}
}
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
offsetWidth 和 offsetHeight 返回"total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border"
clientWidth 和 clientHeight 返回"how much space the actual displayed content takes up, including padding but not including the border, margins, or scrollbars"
scrollWidth 和 scrollHeight 返回"actual size of the content, regardless of how much of it is currently visible"
因此，这取决于预计测量的内容是否超出当前可视区域 .
0
你也可以使用这段代码：
var divID = document.getElementById("divid");
var h = divID.style.pixelHeight;
12 回答
您应该使用
.offsetWidth和.offsetHeight属性 . 注意它们属于元素，而不是.style.var width = document.getElementById('foo').offsetWidth;这是 WKWebView 的代码，它决定了特定Dom元素的高度（对整个页面不起作用）
如前一篇文章所述，element.offsetWidth和element.offsetHeight应该这样做 .
但是，如果您只想将内容集中在一起，那么有一种更好的方法 . 假设您使用xhtml strict DOCTYPE . 设置margin：0，自动属性和px中所需的宽度到body标签 . 内容与页面对齐 .
...似乎CSS帮助将div放在中心...
NOTE ：这个答案写于2008年 . 当时大多数人最好的跨浏览器解决方案就是使用jQuery . 我'm leaving the answer here for posterity and, if you'重新使用jQuery，这是一个很好的方法 . 如果您正在使用其他框架或纯JavaScript，那么接受的答案可能就是您的选择 .
从jQuery 1.2.6开始，您可以使用核心CSS functions，
height和width（或者outerHeight和outerWidth，视情况而定） .为了防止对任何人有用，我把一个文本框，按钮和div都放在同一个css中：
我尝试使用chrome，firefox和ie-edge，我尝试使用jquery而没有，我尝试使用和不使用
box-sizing:border-box. 始终与<!DOCTYPE html>结果：
修改元素样式很容易，但读取值有点棘手 .
JavaScript无法读取来自css（内部/外部）的任何元素样式属性（elem.style），除非您在javascript中使用内置方法调用getComputedStyle .
Element: 要读取值的元素 .
pseudo: 如果需要，则为伪元素，例如:: before . 空字符串或无参数表示元素本身 .
结果是一个具有样式属性的对象，如elem.style，但现在关于所有css类 .
例如，这里的样式没有看到边距：
因此修改了您的javaScript代码以包含您希望获得它的宽度/高度或其他属性的元素的getComputedStyle
Computed and resolved values
CSS中有两个概念：
很久以前创建了getComputedStyle来获取计算值，但事实证明，解析的值更方便，标准也发生了变化 .
所以现在getComputedStyle实际上返回了属性的已解析值 .
Please Note:
getComputedStyle requires the full property name
There are other inconsistencies. As an example, some browsers (Chrome) show 10px in the document below, and some of them (Firefox) – do not:
了解更多信息https://javascript.info/styles-and-classes
您只需要为IE7及更早版本计算它（并且仅当您的内容没有固定大小时） . 我建议使用HTML条件注释来限制不支持CSS2的旧IE . 对于所有其他浏览器使用此：
这是完美的解决方案 . 它以任何大小的
<div>为中心，并将其缩小到其内容的大小 .如果offsetWidth返回0，则可以获取元素的样式宽度属性并在其中搜索数字 . “100px” - > 100
/\d*/.exec(MyElement.style.width）
看看Element.getBoundingClientRect() .
此方法将返回包含
width，height和其他一些有用值的对象：例如：
我相信这不会有
.offsetWidth和.offsetHeight在有时会返回0的问题（如_466020中所述）另一个区别是
getBoundingClientRect()可能返回小数像素，其中.offsetWidth和.offsetHeight将舍入到最接近的整数 .IE8 Note ：
getBoundingClientRect不会在 IE8 及以下返回高度和宽度 . *如果必须支持IE8，请使用
.offsetWidth和.offsetHeight：值得注意的是，此方法返回的Object实际上并不是一个普通的对象 . 它的属性不是enumerable（例如，
Object.keys不起作用盒子外面 . ）更多信息：How best to convert a ClientRect / DomRect into a plain Object
参考：
.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
根据MDN: Determining the dimensions of elements
offsetWidth和offsetHeight返回"total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border"clientWidth和clientHeight返回"how much space the actual displayed content takes up, including padding but not including the border, margins, or scrollbars"scrollWidth和scrollHeight返回"actual size of the content, regardless of how much of it is currently visible"因此，这取决于预计测量的内容是否超出当前可视区域 .
你也可以使用这段代码：