Question

我正在尝试引用图像而不是在html页面中的脚本标记内使用文本。我试图使用图像作为按钮而不是文本。按下按钮后，它将变为文本“已暂停”状态。如下图所示。

pauseButton.innerHTML = "Paused";

再次按下它会显示“暂停”字样。

pauseButton.innerHTML = "Pause";

相反，我希望它能够显示我创建的图像。此代码显示了我尝试引用图像的部分。

pauseButton.innerHTML = "url(Images/pausebackground.png)";

不显示图像，而是显示＆＃39; url（Images / pausebackground.png）＆＃39;以文字的形式。

如何在引号内引用图像？

Answer 1

您需要将HTML代码放入innerHTML（顾名思义）。使用<img>代码：

pauseButton.innerHTML = '<img src="Images/pausebackground.png">';

Answer 2

innerHTML属性将更改元素中的html ：

<div> Here is the inner html. </div>

如果您想在内部html中添加图片，可以使用普通的图片代码，但请记住，只需设置innerHTML即可删除其中的任何内容。

pauseButton.innerHTML = '<img src="Images/pausebackground.png" />'

如果您希望将图像用作按钮的背景（我想您更愿意这样做），您可以将图像设置为元素style.backgroubndImage属性，或者更确切地说，创建一个css类并将其添加到你需要的时候（通过js）按钮。

// Alt 1, changing the style of the element: pauseButton.style.backgroundImage = "url(Images/pausebackground.png)"; // Alt 2, creating a css class and adding it to the element when needed: // CSS. .my-special-button-class { background-image: url(Images/pausebackground.png) } // JS. pauseButton.classList.add("my-special-button-class");

Answer 3

HTML中的图片使用<img>标记，该标记的src属性指向图片网址，如下所示：

<img src="Images/pausebackground.png">

要将图像插入HTML，您可以使用innerHTML，但最好添加实际的HTML元素：

var image = document.createElement('img'); // Create the HTML element
image.setAttribute('src', 'Images/pausebackground.png'); // Set the image src
pauseButton.appendChild(image); // Place it inside the button

要设置不同的图片，您只需更改图片代码上的src属性即可。

如何在脚本中的引号内引用图像

3 个答案: