通过JavaScript修改img标题后标题消失问题

首先得明确核心问题：你的title肯定是被后续的某个事件或代码逻辑重置了——浏览器本身不会自动清空元素的title属性，绝对是有额外代码在干扰。下面分步骤排查和解决：

1. 优先排查鼠标移出事件的干扰 #

这是最常见的诱因：你可能给图片或者它的父元素绑定了mouseout/mouseleave事件，在回调里不小心把title清空了。

检查方法： #

• 打开浏览器开发者工具（F12），切换到Elements面板选中你的img元素，看右侧Event Listeners标签，找有没有mouseout/mouseleave事件绑定；
• 或者直接全局搜代码里的mouseout、mouseleave、hover（比如jQuery的hover()方法第二个参数是移出回调），看是否存在title = ''这类清空逻辑。

修复示例： #

如果发现有类似错误代码：

// 错误示例：鼠标移出时无条件清空title
const img = document.getElementById('my-img');
img.addEventListener('mouseout', () => {
  img.title = '';
});

你可以选择：

• 若不需要移出清空title，直接删掉这段代码；
• 若要保留移出逻辑但仅针对初始状态，加个判断：

img.addEventListener('mouseout', () => {
  // 只有图片是初始src时才清空title
  if (img.src.includes('original-image.jpg')) {
    img.title = '';
  }
});

2. 检查框架数据绑定是否覆盖了DOM修改 #

如果你用了Vue、React这类框架，且title是通过数据绑定的（比如Vue的:title="imgTitle"，React的title={imgTitle}），那直接操作DOM改title会被框架的响应式更新覆盖。

修复方法： #

别直接操作DOM，去更新绑定的数据源：
比如Vue场景：

<template>
  <img :src="imgSrc" :title="imgTitle" @click="switchImage">
</template>

<script>
export default {
  data() {
    return {
      imgSrc: 'original.jpg',
      imgTitle: ''
    }
  },
  methods: {
    switchImage() {
      this.imgSrc = 'new.jpg';
      this.imgTitle = '新的图片标题'; // 更新绑定变量而非直接改DOM
    }
  }
}
</script>

3. 确认修改title的代码是否持久生效 #

确保你在点击事件里的修改方式是正确的，两种有效写法：

// 方式1：直接修改DOM属性
img.title = '新标题';
// 方式2：通过setAttribute修改
img.setAttribute('title', '新标题');

可以在点击事件里加console.log(img.title)，确认修改后title已正确设置；然后鼠标移出后，再在控制台打印document.getElementById('my-img').title，如果显示为空，就回到步骤1找重置代码。

4. 排查第三方脚本/插件的干扰 #

如果页面引入了图片预览、广告类第三方脚本，可能会自动修改图片title。可以临时移除这些脚本，看问题是否消失，逐步定位干扰源。

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