javascript—更改图像的innerHTML

Question

所以我只问了一个问题，而我已经遇到了另一个障碍。 非常感谢stackoverflow社区最近对我的帮助:)

每当我看到人们更改某些标签的innerHTML时，他们就会使用document.getElementByID（id）.innerHTML。 我的图像没有ID，我也不想给每个ID提供ID。

这是我的代码：

function clickImages()
{
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++)
{
     var delegate = function() { hover(this); };

  images[i].onmouseover = delegate;
}
}

function hover(img)
{
img.innerHTML = "Text!";
}

innerHTML似乎不起作用。 当我将鼠标悬停在图像上时，没有任何变化。

提前致谢！ 让我知道是否可以澄清！

Answer 1

图像本身就是被替换的元素，因此没有要替换的innerHTML 。

根据您的评论，如果要在图像旁边添加HTML，可以执行以下操作：

img.insertAdjacentHTML('afterend', 'HTML code');

如果要在图像之前添加HTML，也可以将“ afterend”更改为“ beforebegin”。

在图像本身上书写会更加复杂，并且需要使用透明背景在其上方放置另一个元素，或者将图像本身用作另一个元素的背景，或者使用多种其他类似技术。

Answer 2

Element.innerHTML

innerHTML设置或获取描述元素后代的HTML语法

innerHTML表示介于开始和结束HTML标记之间的HTML。 图片没有innerHTML

我不确定您要实现什么。

如果要在onmouseover显示文本，则可以使用title属性来执行此操作。例如：

<img src="smiley.gif" alt="Smiley face" title="Hello" />

如果您尝试在onmouseover上用文本替换图像...，那么作为一个示例（仅显示可能性），以下代码将隐藏图像并在onmouseover显示文本，并使图像可见并在onmouseout删除文本（尽管恕我直言，效果不是很令人满意，但必须对代码进行更多的工作才能对其进行改进）

请注意：图片标签和跨度之间不应有任何间隙，此特定代码才能正常工作。 另外，向span元素添加负的margin-left会使它显示在图像的位置上。

<img onmouseover="toText(this)" onmouseout="toImage(this)" src="smiley.gif" alt="Smiley" /><span style="visibility: hidden; margin-left: -30px;">Show Text</span>

function toText(img) {

 img.style.visibility = 'hidden';
 img.nextSibling.style.visibility = 'visible';
}

function toImage(img) {

  img.style.visibility = 'visible';
  img.nextSibling.style.visibility = 'hidden';
}

祝好运 ：）