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

要获得真实的，当前计算的尺寸，您有两个选择：

的getComputedStyle（元件，NULL）.getPropertyValue（＆＃34;宽度＆＃34）
element.getBoundingClientRect（）。宽度

第一个是带有（px）单位的CSS字符串，第二个是数字。

（询问所谓的CSS规则只会得到＆＃34;这就是样式表/内联样式所说的＆＃34;信息，这与要求实际计算的当前维度非常不同）

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

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

1 个答案: