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';
}

祝好運 ：）