JavaScript HTML DOM - Changing CSS
HTML DOM 은 JavaScript 로 HTML 요소의 스타일(style )을 변경할 수 있게 해줍니다.
Changing HTML Style
HTML 요소의 스타일을 변경하려면 다음 구문을 사용합니다:
document.getElementById(id).style.property=new
style
다음의 예는 <p> 요소의 스타일을 변경합니다 :
Example
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color
= "blue";
</script>
<p>The paragraph
above was changed by a script.</p>
</body>
</html>
Try
it Yourself » 이벤트 사용
HTML DOM 이벤트가 발생할 때 코드를 실행할 수 있습니다.
이벤트는 HTML 요소에 "다음과 같은 일이 생기면" 브라우저에 의해 생성된다 :
- 요소를 클릭하면
- 페이지가 로드되면
- 입력 필드가 변경되면
이 예에서는 사용자가 버튼을 클릭 할 때, id="id1" 인 HTML 요소의 스타일을 변경한다 :
Example
<!DOCTYPE
html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color
= 'red'">
Click Me!</button>
</body>
</html>
Try it Yourself » More Examples
Visibility How to make an element invisible. Do you want the element to show or not?
HTML DOM Style Object Reference
HTML DOM Style Object Reference.
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »