조회수 확인
JavaScript HTML DOM - Changing CSS

 


1. Changing HTML Style

 HTML 요소의 스타일을 변경하기 위해서 아래 문법을 사용합니다:

document.getElementById(id).style.property=new style


 아래 예제는 <p> 요소의 스타일을 변경하는 예제입니다:


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <body>
 
    <p id="p1">Hello World!</p>
    <p id="p2">Hello World!</p>
 
<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>
 
    <p>The paragraph above was changed by a script.</p>
 
    </body>
</html>
 
cs



 



 





2. Using Events

 HTML DOM은 이벤트가 발생했을 때, 코드를 실행하도록 허용합니다.

 이벤트는 HTML 요소에 어떠한 일이 발생할 때, 브라우저에서 생겨나는 것 입니다.
  - 요소가 클릭 되었을 때

  - 페이지가 로드 되었을 때

  - 입력 필드가 변경 되었을 때


 아래 예제는 id가 id1인 HTML 요소의 스타일을 버튼이 클릭 되었을 때 바꾸는 예제입니다:


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!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>
 
cs




 






다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다