如何使用JavaScript实现点击button元素后将其切换为图片

核心实现逻辑是给按钮绑定点击事件，触发后替换/切换元素显示状态，以下是两种常用的实现方式：

方式1：预先声明图片元素，点击后切换显示状态（更推荐） #

这种方式更适合需要频繁切换按钮/图片状态的场景，状态管理成本更低。

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>按钮切换图片示例</title>
</head>
<body>
  <!-- 提交按钮 -->
  <button id="submitBtn" style="padding: 6px 12px; cursor: pointer;">Submit</button>
  <!-- 已勾选状态图片，默认隐藏 -->
  <img 
    id="checkedIcon" 
    src="替换为你本地勾选图标的相对路径/base64地址" 
    alt="已提交" 
    style="display: none; width: 70px; height: auto; vertical-align: middle;"
  >

  <script>
    const submitBtn = document.getElementById('submitBtn')
    const checkedIcon = document.getElementById('checkedIcon')

    submitBtn.addEventListener('click', function() {
      // 此处可添加表单验证、提交请求等逻辑，确认操作成功后再执行切换
      submitBtn.style.display = 'none'
      checkedIcon.style.display = 'inline-block'
    })
  </script>
</body>
</html>

方式2：点击时动态创建图片元素替换按钮 #

这种方式不需要预先在HTML中写img标签，适合不需要回退为按钮的一次性场景。

核心JS代码 #

const submitBtn = document.getElementById('submitBtn')
submitBtn.addEventListener('click', function() {
  // 创建图片元素
  const checkedImg = document.createElement('img')
  checkedImg.src = '替换为你本地勾选图标的相对路径/base64地址'
  checkedImg.alt = '已提交'
  checkedImg.style.width = '70px'
  checkedImg.style.verticalAlign = 'middle'
  // 替换当前按钮元素
  submitBtn.replaceWith(checkedImg)
})

补充说明 #

• 勾选图标尺寸可以根据你的实际需求调整style属性
• 如果是表单提交场景，建议把切换逻辑放到接口请求的成功回调中，避免点击就切换不符合业务逻辑
• 小尺寸的勾选图标可以转成base64直接写在src属性中，不需要额外引入静态资源

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