jQuery使用.width()方法无法修改元素宽度该如何解决？

• 1 确认jQuery依赖正确引入
  打开浏览器控制台执行$，如果报$ is not defined错误，说明未引入jQuery或者引入顺序错误，需要在你的业务代码之前加载jQuery库。
• 2 修正代码执行时机与触发逻辑
  你现有代码只绑定了窗口resize事件，存在两个问题：一是DOM未渲染完成时执行代码找不到目标元素，二是页面首次加载时不会触发resize事件，初始宽度无法同步。修正后的代码如下：

  // 等待DOM完全加载后再执行
  $(function() {
      // 封装宽度同步方法
      function syncWidth() {
          const videoWidth = $(".you").width();
          // 确认能正常取到video宽度再赋值
          if(videoWidth && videoWidth > 0) {
              $(".santa").width(videoWidth);
          }
      }
      // 页面首次加载主动执行一次同步
      syncWidth();
      // 窗口resize时同步
      $(window).resize(syncWidth);
      // 视频加载完成后补充同步，避免视频异步加载导致宽度获取不准
      $(".you").on('canplay', syncWidth);
  })
  

• 3 排查CSS优先级冲突
  打开浏览器开发者工具，选中.santa对应的img元素，查看样式面板中width属性的生效值：

  如果生效的样式不是你通过JS设置的行内样式，大概率是原有CSS中给img设置了带!important的width规则，或者max-width/min-width限制了宽度范围，需要调整对应CSS规则。

• 4 验证元素选择器是否匹配正确
  在控制台执行console.log($(".you").length, $(".santa").length)，如果输出的数值不是1，说明类名拼写错误、或者页面存在多个同名类元素导致匹配错误，需要修正类名或者调整选择器精度。
• 5 统一盒模型规则
  给两个元素加上统一的盒模型样式，避免因盒模型差异导致的宽度计算偏差：

  .you, .santa {
      box-sizing: border-box;
  }
  

内容的提问来源于stack exchange，提问作者okokokokokokokok