728x90
반응형
<h1>버튼 클릭 시 src변경해 이미지 변경하기</h1> <br><br>
<p>JavaScript를 통해 태그 속성 또한 변경이 가능합니다.</p> <br><br>
<p>태그의 src속성을 변경하여 다른 이미지를 불러올 수 있습니다. </p> <br><br>
<button onclick="document.getElementById('change_image').src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbOXZn9%2Fbtrq334nWjp%2FfzJZCPmd1DpQKjDdqoERK1%2Fimg.png'">이미지 1 표시</button>
<button onclick="document.getElementById('change_image').src='https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdZ8Wlj%2FbtrqX1Uh1Yb%2FKdQ3PsfvWFUlHkn0DyKRe1%2Fimg.png'">이미지 2 표시</button> <br><br><br>
<img id="change_image"> 버튼 클릭 시 여기에 이미지가 표시됩니다. <br><br><br><br><br>
버튼 클릭 시 src변경해 이미지 변경하기
JavaScript를 통해 태그 속성 또한 변경이 가능합니다.
태그의 src속성을 변경하여 다른 이미지를 불러올 수 있습니다.
버튼 클릭 시 여기에 이미지가 표시됩니다.
반응형
'플그래밍 > 자바스킙' 카테고리의 다른 글
| [JavaScript 기초] 태그 없애기/보이기 (0) | 2022.12.03 |
|---|---|
| [JavaScript 기초] CSS STYLE 변경하기 (0) | 2022.12.03 |
| [JavaScript 기초] getElementById로 컨텐츠 바꾸기 (0) | 2022.12.03 |
| [JavaScript 기초] 현재 시간 조회 버튼 (0) | 2022.12.03 |
| [자바스큅] HTML Element의 컨텐츠 변경하기 (0) | 2022.03.04 |