javascript - 在 JavaScript 中获取真实元素的宽度

Question

例如，我有下一个 HTML 标记(在通用 div 中模仿我的自定义下拉列表):

$(document).ready(function() {
    $("#selectbox-body").css("width", $("#selectbox").width());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div id="outer-div">
	<label style="float: left; width: 100px; background-color: blue">LABEL</label>
	<div id="selectbox" style="background-color: pink">......</div>
	<div id="selectbox-body" style="position: absolute; height: 100px; background-color: red">12312313</div>
</div>

或http://jsfiddle.net/sdkpkLds/ .

#selectbox.width 等于 #outer-div.width，而不是 #outer-div.width - label.width。如何将 #selectbox-body 放在 label 下？

Answer 1

要获得当前计算的实际尺寸，您有两种选择:

1. getComputedStyle(element,null).getPropertyValue("width")
2. element.getBoundingClientRect().width

第一个是一个以(px)为单位的 CSS 字符串，第二个是一个数字。

(询问假定的 CSS 规则只会让您得到“这就是样式表/内联样式所说的”信息，这与询问实际计算的当前尺寸有很大不同)

另请注意，getComputedStyle 是一个全局函数。旧的教程可能会告诉您使用 document.getDefaultView.getComputedStyle 等，这已不再是必需的。