자바스크립트는 HTML의 내용을 변경할 수 있다.
많은 자바스크립트의 메소드 중에 하나는 getElementById() 이다.
해당 메소드를 사용하여 id값을 () 안에 입력하게 되면 해당 id값을 가진 요소의 내용이 변경된다.
<예제>
<!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>
예제의 button을 클릭하면 <p id="demo">의 내용이 변경되는 걸 확인할 수 있다.
💡 자바스크립트는 큰 따옴표(" ")나 작은따옴표(' ') 상관없이 모두 인식 가능하다.
자바스크립트는 HTML 속성 값을 변경할 수 있다.
<예제>
<!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>
위의 예제에서는 자바스크립트가 <img> 태그의 src속성 값을 변경하여, button을 클릭할 때마다 이미지가 변경되는 걸 확인할 수 있다.
자바스크립트는 HTML의 스타일(CSS)을 변경할 수 있다.
<예제>
<!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>
button 클릭 시 폰트 사이즈가 변경되는 것을 확인할 수 있다.
자바스크립트는 HTML 요소를 숨기거나 보여줄 수 있다.
1. 스타일에서 display를 'none'으로 변경하면 HTML 요소를 숨길 수 있다.
<예제>
<!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>
button 클릭 시 p태그의 내용이 사라지는 걸 확인할 수 있다.
2. 스타일에서 display를 'block'으로 변경하면 HTML 요소를 보여줄 수 있다.
<예제>
<!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>
button 클릭시 <p id="demo">태그의 내용이 나타나는 걸 확인할 수 있다.
반응형
'Programming > JavaScript' 카테고리의 다른 글
| 자바스크립트 주석(JavaScript Comments) (0) | 2022.10.13 |
|---|---|
| 자바스크립트 문법(JavaScript Syntax) (0) | 2022.10.13 |
| 자바스크립트 구문(JavaScript Statements) (0) | 2022.10.12 |
| 자바스크립트 출력(JavaScript Output) (0) | 2022.10.12 |
| 자바스크립트 위치(JavaScript Where To) (0) | 2022.10.12 |
