如何为JavaScript控制的hover切换图片设置120px固定宽度

所有方案都不会影响你后续替换src属性和hover切换图片的逻辑，宽度会始终固定为120px，你可以根据场景按需选择：

• 方案1：直接在img标签添加原生width属性
  代码改动最小，直接给<img>标签增加width="120"属性即可：

  <img id="my-img" src="http://dummyimage.com/100x100/000/fff" width="120" onmouseover="hover(this);" onmouseout="unhover(this);" />
  

• 方案2：用内联样式固定宽度（优先级最高，避免被其他样式覆盖）
  如果担心页面其他CSS规则会覆盖宽度设置，用内联style属性更稳妥，额外加height: auto可以保证图片等比例缩放不变形：

  <img id="my-img" src="http://dummyimage.com/100x100/000/fff" style="width: 120px; height: auto;" onmouseover="hover(this);" onmouseout="unhover(this);" />
  

• 方案3：用CSS样式规则统一控制（适合多图片批量设置的场景）
  如果你后续有多个图片都要固定120px宽度，可以在头部加style标签写CSS规则，完整修改后的代码如下：

  <html>
  <style>
  #my-img {
    width: 120px;
    height: auto;
    /* 如果需要强制图片内容适配尺寸不变形，可以额外加 object-fit: contain; */
  }
  </style>
  <script>
      function hover(element) {
    element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
  }
  
  function unhover(element) {
    element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
  }
  </script>
  <img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />
  </html>
  

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