使用jQuery修改指定元素width属性无效，该如何解决？

API 探路者

2026-8-10

解决jQuery无法修改指定元素width的问题

以下是排查和解决方法：

确认jQuery已正确引入
先检查页面是否加载了jQuery库，控制台执行typeof $，返回function才说明引入正常，否则代码无法生效。
保证代码在DOM加载完成后执行
要是代码写在页面头部，DOM还没渲染完就运行，肯定找不到目标元素。可以把代码放进$(document).ready()回调里，或者把script标签挪到</body>标签前：
```
$(document).ready(function() {
  $(".bar .progress-line.html span").css("width", "10%");
});
```
验证选择器是否匹配目标元素
在控制台执行console.log($(".bar .progress-line.html span").length)，如果返回0，说明选择器和元素结构不匹配。核对HTML结构，目标元素应该是类似这样的层级：
```
<div class="bar">
  <div class="progress-line html">
    <span></span>
  </div>
</div>
```
这里.progress-line.html表示同时拥有progress-line和html两个类的元素，选择器写法本身是正确的。
排查样式优先级冲突
如果原CSS里给该元素的width加了!important，会覆盖jQuery设置的内联样式。要么去掉!important，要么通过jQuery强制设置内联样式来覆盖。