Question

所以我刚问了一个问题而且我已经遇到了另一个问题。非常感谢stackoverflow社区最近帮助我这么多：）

每当我看到人们更改某些标签的innerHTML时，他们都会使用document.getElementByID（id）.innerHTML。我的图片没有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');

你也可以改变后续的＆＃39;之前＆＃39;之前＆＃39;如果你想在图像之前添加HTML。

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

Answer 2

Element.innerHTML

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

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

我不确定你想要达到什么目的。

如果您希望显示文字onmouseover，可以使用title属性来执行此操作..例如：

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

如果您尝试使用onmouseover上的文字替换图像...然后作为示例（仅显示可能性），以下代码将隐藏图像＆amp;显示文字onmouseover并使图片可见＆amp;删除文本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';
}

祝你好运：）

javascript--更改图像的innerHTML

2 个答案: