为什么document.getElementById("mydiv").style.width不返回 mydiv 的宽度？它返回一个空字符串。有些人建议使用 offsetWidth，但我不明白为什么不能从 style.width 获取它。
小智 5
DOM 元素尺寸的主题很复杂。
您可能想要以下之一：
只读属性
HTMLElement.offsetWidth以整数形式返回元素的布局宽度。通常，
offsetWidth是元素 CSS 宽度的像素测量值，包括任何边框、填充和垂直滚动条（如果呈现）。它不包括伪元素的宽度，例如::before或::after。如果元素被隐藏（例如，通过将
style.display元素或其祖先之一设置为“none”），则0返回。
对于内联元素和没有 CSS 的元素，该
Element.clientWidth属性为零；否则，它是元素的内部宽度（以像素为单位）。它包括填充，但不包括边框、边距和垂直滚动条（如果存在）。当
clientWidth用于根元素（<html>元素）（或者<body>如果文档处于怪异模式时），则返回视口的宽度（不包括任何滚动条）。这是 clientWidth 的一个特例。
该
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。在使用标准盒模型的情况下，元素的大小等于其宽度/高度 + 填充，或者仅在已
box-sizing: border-box对其进行设置时才等于宽度/高度。
jQuery 将部分复杂性隐藏在.width方法后面。
const $ = document.querySelector.bind(document)
const d1 = $('#unstyled')
const d2 = $('#stylesheet')
const d3 = $('#inline')
const details = $('#details')
details.innerHTML = (`
<table>
<tr>
<td><h2>A</h2> offsetWidth: '${d1.offsetWidth}', clientWidth: '${d1.clientWidth}', getBoundingClientRect().width: '${d1.getBoundingClientRect().width}', style.width: '${d1.style.width}'
</td>
</tr>
<tr>
<td><h2>B</h2> offsetWidth: '${d2.offsetWidth}', clientWidth: '${d2.clientWidth}', getBoundingClientRect().width: '${d2.getBoundingClientRect().width}', style.width: '${d2.style.width}'
</td>
</tr>
<tr>
<td><h2>C</h2> offsetWidth: '${d3.offsetWidth}', clientWidth: '${d3.clientWidth}', getBoundingClientRect().width: '${d3.getBoundingClientRect().width}', style.width: '${d3.style.width}'
</td>
</tr>
</table>`)* {
box-sizing: border-box;
font-family: sans-serif;
font-size: .9rem;
}
#stylesheet {
line-height: 50px;
width: 100px;
height: 50px;
text-align: center;
padding: 5px;
margin: 5px;
border: 5px solid red;
}
div {
display: inline-block;
box-shadow: 0 0 0px 1px silver inset;
}
table {
border: 0px;
}
td {
text-align: left;
padding: 0px;
}<div id="unstyled">A</div>
<div id="stylesheet">B</div>
<div id="inline" style="width:100px;height:50px;text-align: center;line-height: 50px; padding: 5px; margin: 5px; border: 5px solid red;">C</div>
<section id="details"></section>