通过以下内容,我可以获得选择输入的宽度(以像素为单位)。是否可以获取选择列表中选项的宽度?谢谢
$('#mySelect').width();
更新-这就是我想要这个的原因。我需要将文本放在选择列表中居中。我无法使用 css text-align: center; 跨设备和浏览器执行此操作我唯一的选择是使用文本缩进。由于我的网站具有液体宽度并且选项具有不同的长度,因此我需要动态计算该值。
因此,如果我可以获得选择选项文本的宽度,并且还可以获得容器的宽度(更容易),那么我可以计算文本缩进应该是多少。谢谢
NimChimpsky 的方法似乎效果很好。代码在这里:jQuery - 函数在 div 单击时运行正常,但在页面加载时运行正常
我是这样做的:
- 做一个新的
<span>
object
- 将文本设置为相关选项之一
- 从所选选项中获取与文本宽度相关的计算样式值
- 将这些测量值设置为跨度
- 将跨度附加到正文
- 测量该跨度的宽度
- 移除跨度
记住:
无法测量选择的向下箭头(三角形)。它是浏览器 chrome 的一部分。大约 30 像素的魔法值是合理的。
var getOptionWidth = function(opt) {
var styleProps = [
'font-family',
'font-kerning',
'font-size',
'font-stretch',
'font-style',
'font-variant',
'font-variant-ligatures',
'font-weight',
'text-transform',
'letter-spacing',
'word-spacing',
'padding-left',
'padding-right'
];
var o = $('<span>')
.text($(opt).text());
for (var i=0; i < styleProps.length; i++) {
o.css(styleProps[i], $(opt).css(styleProps[i]));
}
o.appendTo('body');
var w = o.width();
o.remove();
return w;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)