자바스크립트 HTML DOM – CSS 변경

자바스크립트는 HTML DOM으로 HTML 요소의 스타일을 변경할 수 있습니다.


HTML 스타일 변경

HTML 요소의 스타일 변경하려면, 이 구문을 사용합니다:

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

Example

Hello World!

Hello World!

위의 단락은 스크립트로 변경되었습니다.


이벤트(Events) 사용

HTML DOM으로 이벤트가 발생할 때 코드를 실행할 수 있습니다.

HTML 요소에 “어떤 일이 일어나면(things happen)”, 브라우저가 이벤트를 생성합니다:

  • 요소를 클릭합니다.An element is clicked on
  • 페이지가 로드됩니다.The page has loaded
  • 입력 필드(Input fields)가 변경됩니다.Input fields are changed

이벤트에 대한 자세한 내용은, 이 자습서의 다음 장을 참조하십시오.

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

Example

My Heading 1


추가 예제

Visibility

Example

This is a text.
This is a text.
This is a text.
This is a text.

어떻게 요소를 보이지 않게 할 수 있나요? 요소를 보여 주기를 원합니까, 아니면 숨기기를 원합니까?


HTML DOM 스타일 객체(Style Object) 참조(Reference)

모든 HTML DOM 스타일 속성(properties)을 보려면, 모든 HTML DOM Style Object Reference를 참조하십시오.

출처: JavaScript HTML DOM – Changing CSS

답글 남기기