スクリプトの引用符で画像を参照する方法

Question

htmlページのscriptタグ内のテキストを使用する代わりに、画像を参照しようとしています。テキストの代わりにボタンの画像を使用しようとしています。ボタンを押すと、以下のように「一時停止」というテキストに変わります。

pauseButton.innerHTML = "Paused"; 

もう一度押すと、「一時停止」と表示されます。

pauseButton.innerHTML = "Pause"; 

代わりに私が作成した画像を表示したいと思います。このコードは、私が画像を参照しようとしたセクションを示しています。

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

イメージを表示する代わりに、テキストの形で 'url（Images/pausebackground.png）'が表示されます。

引用符で画像を参照するにはどうすればよいですか？

Answer 1

innerHTML（名前が示すように）にHTMLコードを入力する必要があります。 <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を介して）。 HTMLで

// 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

画像がよう、画像のURLを指すsrc属性を持つ<img>タグ、使用しています：HTMLに画像を挿入するには

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

を、あなたは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属性を変更でメイジタグ。