728x90
반응형
See the Pen Untitled by namminimi (@namminimi) on CodePen.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./images/pic_bulboff.gif" alt="">
<div>
<button onclick="bulon()">불켜기</button>
<button onclick="buloff()">불끄기</button>
</div>
<script>
console.log(document.querySelector("img").src);
function buloff() {
document.querySelector("img").src = "./images/pic_bulboff.gif";
}
function bulon() {
document.querySelector("img").src = "./images/pic_bulbon.gif";
}
</script>
</body>
</html>
|
cs |
사용한 DOM
1. document.querySelector()
2022.12.03 - [javascript HTML DOM] - 자바스크립트를 이용해서 DOM Element(요소) 찾기 및 콘솔 출력
2. click 이벤트
3. .src
728x90
반응형
'javascript > javascript HTML DOM' 카테고리의 다른 글
| [javascript]HTML 내용, 속성, 스타일 변경하기 (0) | 2022.12.03 |
|---|---|
| [javascript]html컬랙션 과 노드리스트 차이 & 배열과 유사배열의 차이 (0) | 2022.12.03 |
| [javascript]자바스크립트를 이용해서 DOM Element(요소) 찾기 및 콘솔 출력 (0) | 2022.12.03 |
| [javascript]change이벤트 실습1 (0) | 2022.12.03 |
| [javascript]요소 노드 생성 및 요소 노드 자식 추가 (0) | 2022.11.29 |
댓글