스크립트에서 따옴표로 묶은 이미지를 참조하는 방법

Question

html 페이지의 script 태그 내에서 텍스트를 사용하는 대신 이미지를 참조하려고합니다. 텍스트 대신 버튼에 이미지를 사용하려고합니다. 버튼을 누르면 아래 그림과 같이 '일시 중지됨'텍스트로 바뀝니다.

pauseButton.innerHTML = "Paused"; 

다시 누르면 '일시 중지'라는 단어가 표시됩니다.

pauseButton.innerHTML = "Pause"; 

대신 내가 만든 이미지를 표시하고 싶습니다. 이 코드는 이미지를 참조하려고 시도한 부분을 보여줍니다.

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

이미지를 표시하는 대신 'url (Images/pausebackground.png)'을 텍스트 형식으로 표시합니다.

큰 따옴표로 이미지를 참조하려면 어떻게해야합니까?

Answer 1

innerHTML (이름에서 알 수 있듯이)에 HTML 코드를 입력해야합니다. innerHTML 속성 내부의 요소 HTML 변경됩니다

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

Answer 2

: <img> 태그를 사용하면 내부 HTML에 이미지를 추가하려면

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

을, 당신은 보통의 이미지를 사용할 수 있습니다 태그가 붙지 만, innerHTML을 설정하면 이미 그 안에있는 것이 모두 제거됩니다.

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

당신은 당신도 바로 요소 style.backgroubndImage 속성으로 이미지를 설정하거나 오히려 수 (나는 당신이 오히려 할 것 같아요) 버튼의 배경으로 이미지를 사용하려면, CSS 클래스를 생성 필요할 때 버튼에 추가하십시오 (js를 통해). ,

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

는 HTML에 이미지를 삽입하려면 innerHTML을 사용할 수

// 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에 이미지는 src 속성이 그래서, 이미지 URL을 가리키는있는 <img> 태그를 사용 하지만 실제 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 속성을 변경한다 마법사 태그.