예제 8-4. this 활용
WEB/JAVASCRIPT-CONCEPT 2017. 10. 30. 14:01 |this는 객체 자신을 가리키는 자바스크립트 키워드로서, DOM 객체에서도 객체 자신을 가리키는 용도로 사용된다.
ex)
<div onclick="this.style.backgroundColor='orange'">
this는 div 객체 자신을 가리키며, 자신의 배경색을 orange로 바꾼다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>this 활용</title> <script> function change(obj, size, color) { obj.style.color = color; obj.style.fontSize = size; } </script> </head> <body> <h3>this 활용</h3> <hr> <button onclick="change(this, '30px', 'red')">버튼</button> <button onclick="change(this, '30px', 'blue')">버튼</button> <div onclick="change(this, '25px', 'orange')"> 여기 클릭하면 크기와 색 변경 </div> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 8-6. 태그 이름을 DOM 객체 찾기, getElementsByTagName() (0) | 2017.10.31 |
|---|---|
| 예제 8-5. document 객체의 프로퍼티 출력 (0) | 2017.10.31 |
| 예제 8-3. innerHTML을 이용하여 HTML 콘텐츠 동적 변경 (0) | 2017.10.30 |
| 예제 8-2. 자바스크립트로 <span>태그의 CSS3 스타일 동적 변경 (0) | 2017.10.30 |
| 예제 8-1. DOM 객체의 구조 출력 : p 객체 사례 (0) | 2017.10.30 |