例如,我有下一个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下?

最佳答案

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


getComputedStyle(element,null).getPropertyValue(“ width”)
element.getBoundingClientRect()。width


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

(要求假定的CSS规则只会为您提供“这就是样式表/内联样式所说的”信息,这与要求实际计算出的当前尺寸大不相同)

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

关于javascript - 在JavaScript中获取实际元素的宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26185633/

10-11 15:00
查看更多