使用 jquery .css 修改的元素样式未在 Chrome 上刷新答案

【问题标题】：Element style modified with jquery .css is not being refreshed on Chrome使用 jquery .css 修改的元素样式未在 Chrome 上刷新
【发布时间】：2012-08-09 21:23:27
【问题描述】：

当发生 onchange 事件时，我正在使用 .css 更新选择元素的宽度。在 HTML 中：

<select name="city_search" id="city_search" onchange='resetDropDown("#state_search");'>
<select name="state_search" id="state_search" onchange='resetDropDown("#city_search");'>

在 JS 中

function resetDropDown(elementObj)
{
    var selectBoxWidth = $(elementObj).attr('id') == 'college_search' ? 143 : 113;
    $(elementObj).css({width:selectBoxWidth});
}

由于某种原因，属性宽度已正确更改，但在检查元素或刷新页面之前，chrome 不会显示更改。有没有办法强制 chrome 显示应用于元素样式的更改？

提前致谢。伊丽莎白

【问题讨论】：

似乎工作：jsfiddle.net/cZf3A

标签： jquery css select width

【解决方案1】：

非常简单的解决方案对我有用。尝试将$(document).ready改为$(window).load

问题可能在于准备好文档。如果函数在 Windows 加载后运行，那么它可能会起作用。

【讨论】：

【解决方案2】：

OnChange 事件仅在对象更改和失去焦点时触发。您可以使用一些解决方法，例如对文本输入使用 keyup 事件或对复选框使用单击事件。根据选择更改的上下文，您可能需要手动触发更改事件。如果您的选择元素在用户选择不同的选项时发生变化，我建议 onclick 而不是 onchange 应该适合您。

【讨论】：

【解决方案3】：

这个问题可以通过强制 webkit 重绘/重绘样式更改来解决。你可以参考这个答案：https://stackoverflow.com/a/3485654/567101

【讨论】：

非常感谢。强制 webkit 重绘元素效果很好。