JavaScript 는 HTML 컨텐츠를 변경할 수 있다.
많은 자바스크립트 HTML 방법 중 하나는 getElementById()입니다.
아래의 예제는 HTML 요소(id="demo" 포함)를 finds하고 요소 콘텐츠(내부 HTML)를 "Hello JavaScript"로 변경합니다:
| document.getElementById("demo").innerHTML = "Hello JavaScript"; |
| <!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <p id="demo">JavaScript can change HTML content.</p> <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button> </body> </html> |
처음 실행화면입니다.
'Click Me!' 버튼을 클릭하면 아래 그림과 같이 변경이 된다.
자바스크립트는 두 개의 따옴표와 한 개의 따옴표를 모두 허용합니다:
| document.getElementById('demo').innerHTML = 'Hello JavaScript'; |
한개의 따옴표도 동일하게 실행이 된다.
JavaScript는 HTML 속성값을 변경할 수 있다.
이 예에서 JavaScript는 <img> 태그의 src(소스) 속성 값을 변경합니다:
| <!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <p>JavaScript can change HTML attribute values.</p> <p>In this case JavaScript changes the value of the src (source) attribute of an image.</p> <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button> <img id="myImage" src="pic_bulboff.gif" style="width:100px"> <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button> </body> </html> |
처음 실행화면입니다.
'Turn on the light' 버튼을 클릭하며 전구에 불이 들어옵니다.
'Turn off the light' 버튼을 클릭하며 원 이미지로 복원이 된다.
JavaScript는 HTML 스타일(CSS)을 변경할 수 있다.
HTML 요소의 스타일을 변경하는 것은 HTML 특성을 변경하는 변형입니다:
| document.getElementById("demo").style.fontSize = "35px"; |
| <!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <p id="demo">JavaScript can change the style of an HTML element.</p> <button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button> </body> </html> |
'Click Me!' 버튼을 클릭하면 아래 그림과 같다.
JavaScript는 HTML 요소를 숨길 수 있다.
HTML 요소를 숨기려면 display 스타일을 변경해야 합니다:
| document.getElementById("demo").style.display = "none"; |
| <!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <p id="demo">JavaScript can hide HTML elements.</p> <button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button> </body> </html> |
'Click Me!' 버튼을 클릭하면 'p' 태그 요소가 감추어진다.
JavaScript는 HTML 요소를 보여주기를 할 수 있다.
숨겨진 HTML 요소를 표시하려면 display 스타일을 변경할 수도 있습니다:
| document.getElementById("demo").style.display = "block"; |
| <!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <p>JavaScript can show hidden HTML elements.</p> <p id="demo" style="display:none">Hello JavaScript!</p> <button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button> </body> </html> |
'Click Me!' 버튼을 클릭하면 'p' 태그 요소가 보여진다.
이번 글에서는 JavaScript 개요로서, JavaScript로 무엇을 할 수 있는지 대략적으로 예제를 테스트하며 살펴보았습니다.
JavaScript로 우리는 HTML 컨텐츠, HTML 속성값들, HTML 스타일(CSS)를 보여줄 수 있도록 할 수 있으며, 그 반대로 HTML 요소들을 감추거나 보이게 할 수 있다.
꼭 손으로 눈으로 머리로 익히며 실습하기를 바란다.
모두 화이팅입니다.
출처 : 이 글의 출처는 w3scholls 사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'JavaScript > JavaScript Basic' 카테고리의 다른 글
| JavaScript 위치 (0) | 2024.03.29 |
|---|
댓글