제이스크립트 HTML DOM - CSS 변경

HTML DOM은 JavaScript가 HTML 요소의 스타일을 변경할 수 있게 합니다.

HTML 스타일 변경

HTML 요소의 스타일을 변경하려면 다음 문법을 사용하세요:

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

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

实例

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>위의 단락은 스크립트에 의해 변경되었습니다.</p>
</body>
</html>

亲自试一试

이벤트 사용

HTML DOM은 이벤트가 발생할 때 코드를 실행할 수 있도록 합니다.

HTML 요소에서 '某些事情'가 발생할 때, 브라우저는 이벤트를 생성합니다:

  • 요소를 클릭할 때
  • 페이지가 로드될 때
  • 입력 필드가 변경될 때

다음 장에서 이벤트에 대해 더 많은 지식을 배울 수 있습니다.

이 예제에서 사용자가 버튼을 클릭할 때 id="id1"의 HTML 요소의 스타일을 변경합니다:

实例

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">제목 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
클릭하세요！
</button>
</body>
</html>

亲自试一试

更多实例

Visibility
요소를 보이지 않게 만들기. 요소를 표시하고 싶으신가요?

HTML DOM 스타일 객체 참조 설명서

모든 HTML DOM 스타일 속성에 대해 방문해 주세요 HTML DOM 스타일 객체 참조 설명서。