点击<img>标签时如何传值到其他页面且不破坏图片原有样式？

方案1：自定义属性绑定点击事件（无样式侵入，推荐） #

不需要嵌套<a>标签，直接在图片上添加自定义属性存储传递值，绑定点击事件实现跳转，完全不会改动原有图片的DOM层级和样式：

<img 
  src="https://via.placeholder.com/200.jpg" 
  alt="" 
  class="cardImg"
  data-transfer-value="gpu"
>

对应JS逻辑：

// 批量绑定所有卡片图片的点击事件
document.querySelectorAll('.cardImg').forEach(img => {
  img.style.cursor = 'pointer'; // 模拟链接的手型点击提示
  img.addEventListener('click', () => {
    const targetValue = img.dataset.transferValue;
    // GET方式跳转传参
    window.location.href = `results.inc.php?value=${encodeURIComponent(targetValue)}`;
  });
});

方案2：重置标签默认样式（适配原有跳转逻辑） #

如果需要保留<a>标签的跳转逻辑，只需要给包裹图片的<a>标签添加样式重置规则，消除默认样式对图片的影响：

<a href="results.inc.php?value=gpu" class="card-wrapper-link">
  <img src="https://via.placeholder.com/200.jpg" alt="" class="cardImg">
</a>

对应CSS重置规则：

.card-wrapper-link {
  display: inline-block; /* 对齐原有图片的展示模式 */
  margin: 0;
  padding: 0;
  border: none;
  text-decoration: none; /* 清除默认链接下划线 */
  line-height: 0; /* 清除行高导致的额外空白间距 */
}
.card-wrapper-link .cardImg {
  display: block; /* 避免图片默认对齐产生的底部间隙 */
}

补充：POST方式传参方案 #

如果你需要隐藏参数不暴露在URL中，可以通过动态创建隐藏表单提交实现，同样不需要改动图片原有样式：

document.querySelectorAll('.cardImg').forEach(img => {
  img.style.cursor = 'pointer';
  img.addEventListener('click', () => {
    const targetValue = img.dataset.transferValue;
    // 动态生成POST表单
    const submitForm = document.createElement('form');
    submitForm.method = 'post';
    submitForm.action = 'results.inc.php';
    
    const valueInput = document.createElement('input');
    valueInput.type = 'hidden';
    valueInput.name = 'value';
    valueInput.value = targetValue;
    
    submitForm.appendChild(valueInput);
    document.body.appendChild(submitForm);
    submitForm.submit();
    document.body.removeChild(submitForm);
  });
});

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