如何引用腳本中的引號內的圖像

我想引用圖像，而不是在HTML頁面中的腳本標記內使用文本。我正在嘗試使用圖片作爲按鈕而不是文本。按下該按鈕時，它將變爲文本「暫停」，如下所示。如何引用腳本中的引號內的圖像

pauseButton.innerHTML = "Paused";

當它再次按下時，它顯示單詞「暫停」。

pauseButton.innerHTML = "Pause";

相反，我希望它顯示我創建的圖像。該代碼顯示了我試圖引用圖像的部分。

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

不是顯示圖像，而是以文本的形式顯示'url（Images/pausebackground.png）'。

如何在引號內引用圖像？

來源

2016-07-23 ASA2k

您需要將HTML代碼放入innerHTML（顧名思義）。使用<img>標籤：

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

來源

2016-07-23 09:59:39

的innerHTML屬性將改變HTML 內元素：如果您希望將圖像添加到內部HTML

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

，你可以使用正常的圖像標籤，但請記住，只需設置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");

來源

2016-07-23 10:01:49 Jite

在HTML的圖像使用<img>標籤，其中有一個src屬性指向圖像的URL，像這樣：

<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屬性上的i法師標籤。

來源

2016-07-23 10:05:15

如何引用腳本中的引號內的圖像

回答

相關問題