我正在尝试获取隐藏的多个选择元素的宽度。在JQuery对象上使用width()返回宽度,该宽度是CSS定义的宽度,但包括填充。一旦我切换要显示的元素,调用width()将返回正确的值(即不包括填充/边框/边距的宽度)。
示例HTML:
<span id="test" style="visibility:hidden">
<select id="one">
<option>1</option><option>2</option><option>3</option>
</select>
</span>
CSS:
select {
width: 80px;
padding: 0 0 0 15px;
}
预期宽度:65,报告宽度:80
这是一个JSFiddle演示我的问题:http://jsfiddle.net/2RH7C/4/
除了设置“visibility:hidden”(而不是display:none),还是克隆/移动屏幕上的对象外,还有其他解决方法吗?我正在使用KnockoutJS数据绑定来控制可见性,并且该绑定设置display:none(http://knockoutjs.com/documentation/visible-binding.html)。
答案 0 :(得分:1)
每边的边框是1px。 带边框:无;结果是65。
答案 1 :(得分:1)
这似乎是jQuery 1.7中的一个错误,在jQuery 1.8中没有出现:
如果您没有更新jQuery的选项,那么我担心“使用屏幕外元素计算”或visibility: hidden
方法似乎是您唯一的选择。
答案 2 :(得分:0)
javascript是正确的。使用width()已经消除了填充。渲染宽度实际上是110px(80 + 15 + 15)。