jQuery - 获取选择列表中选项的像素宽度?

2023-11-29

通过以下内容,我可以获得选择输入的宽度(以像素为单位)。是否可以获取选择列表中选项的宽度?谢谢

$('#mySelect').width();

更新-这就是我想要这个的原因。我需要将文本放在选择列表中居中。我无法使用 css text-align: center; 跨设备和浏览器执行此操作我唯一的选择是使用文本缩进。由于我的网站具有液体宽度并且选项具有不同的长度,因此我需要动态计算该值。

因此,如果我可以获得选择选项文本的宽度,并且还可以获得容器的宽度(更容易),那么我可以计算文本缩进应该是多少。谢谢

NimChimpsky 的方法似乎效果很好。代码在这里:jQuery - 函数在 div 单击时运行正常,但在页面加载时运行正常


我是这样做的:

  1. 做一个新的<span> object
  2. 将文本设置为相关选项之一
  3. 从所选选项中获取与文本宽度相关的计算样式值
  4. 将这些测量值设置为跨度
  5. 将跨度附加到正文
  6. 测量该跨度的宽度
  7. 移除跨度

记住:
无法测量选择的向下箭头(三角形)。它是浏览器 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(使用前将#替换为@)

jQuery - 获取选择列表中选项的像素宽度? 的相关文章

  • Jquery查找值为X的表格单元格

    我正在尝试寻找一个 td 其中值为 5 它是一个日历 因此只有一个 5 值 您可以使用filter https api jquery com filter method td filter function return this text
  • 禁用输入中的空格,并允许后退箭头?

    我试图禁用用户名文本字段中的空格 但是我的代码也禁用后退箭头 有什么办法也允许后退箭头吗 function var txt input UserName var func function txt val txt val replace s
  • jquery ajax可以调用外部webservice吗?

    jquery ajax代码可以调用吗网络服务来自另一个域名或另一个网站 像这样 ajax type POST url http AnotherWebSite com WebService asmx HelloWorld data name
  • jQuery stopPropagation 不起作用

    我正在使用以下内容选色器 https github com meta100 mColorPicker blob master javascripts mColorPicker js它工作正常 但是当我单击颜色选择器图标时 我不希望它冒泡到主
  • 未捕获的类型错误:无法读取未定义的属性“toLowerCase”

    我收到此错误 它源自 jquery 框架 当我尝试加载准备好的文档上的选择列表时 出现此错误 我似乎无法找到为什么会出现此错误 它适用于更改事件 但在尝试手动执行该函数时出现错误 未捕获的类型错误 无法读取未定义的属性 toLowerCas
  • JavaScript 中的正则表达式用于验证十进制数字

    我想要 JavaScript 中的正则表达式来验证十进制数字 它最多只允许两位小数 例如 它应该允许10 89但不是10 899 它还应该只允许一个句点 例如 它应该允许10 89但不是10 8 9 尝试使用以下表达式 d d 0 2 如果
  • JQUERY 中用于加载 JQGRID 的选项卡

    我正在使用 jqgrid 制作网格 我想在我的应用程序中创建选项卡 单击选项卡应打开一个网格 选项卡的名称应显示在页面顶部 当我单击另一个选项卡时 它应该加载另一个网格 网格应该加载在同一页面上 并且选项卡也应该始终出现在页面上 我已经创建
  • 使用 javascript 将 html 文本渲染为位图,无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can
  • 如何在每个组件完成加载后在 Angular 2 中运行 jquery 函数

    我已经尝试了所有生命周期挂钩 但无法实现所需的结果 我需要的结果是触发一个函数 该函数在加载每个元素 组件 后初始化用于单个页面上不同元素的许多 jquery 插件 假设你有这个结构 主页 滑块 小部件 产品旋转器 ETC 这些元素中的每一
  • 使用 jQuery UI 日期选择器选择日历更改 URL

    我正在使用 jQuery UI 选择器 我想知道当有人选择日期时是否有可能 它会自动将他们重定向到 URL 如下所示 index php date 2013 10 15 这是我正在使用的插件 Date
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • 禁用 Bootstrap 中的选项卡

    我正在尝试禁用引导程序中的选项卡 我一直在研究 但尚未找到解决方案 我已经尝试过这个 可以禁用 Bootstrap 中的选项卡吗 https stackoverflow com questions 9237314 can you disab
  • `attr('checked', false)` 不适用于 IE6

    正如标题所说 我无法获取 attr checked false 在 IE6 上工作 我正在克隆一些 HTML 然后在将新克隆的 HTML 分配给元素之前 我会运行它并取消选中新克隆部分中的所有复选框 这在除 IE 6 之外的所有浏览器中都可
  • 如何删除除任何特定 id 之外的元素

    假设有一个父 id 其中包含许多元素 我想删除除一个元素之外的所有元素 ex parent id children not id n remove
  • 过滤自定义选择器是否大于 jQuery 中的数字[重复]

    这个问题在这里已经有答案了 快给你一份 我查看了 jQuery com 中的选择器 但找不到按大于数字的选择器进行过滤的方法 我想做这个 level gt 4 hide 我的 html 看起来像这样 div Test div 如何使用该语法
  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • Instagram 粉丝计数 - 使用 jQuery / json 和 PHP

    经过几个小时的工作和一些帮助萨希尔 米塔尔我们已经成功使用 jQuery json 和 PHP 检索 Instagram 关注者计数 这是我们设法整理的内容 希望对其他想要获取 Instagram 信息的人有所帮助 我们的 jQuery I
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 用于选择特定 div 中具有特定类的锚元素的 jQuery 选择器是什么

    我有一些这样的代码 我想选择每个 a 带有类的标签status在 div 中foo div a class status a div 你可以这样做 foo find status a
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style

随机推荐