HTML DOM Element style 속성

정의와 사용법

style 속성은 요소의 style 속성의 값을 CSSStyleDeclaration 객체로 반환합니다.

CSSStyleDeclaration 객체는 요소의 모든 인라인 스타일 속성을 포함합니다. 그러나 <head> 부분이나 외부 스타일 시트에 설정된 모든 스타일 속성.

점 1

이와 같은 스타일을 설정할 수 없습니다：

element.style = "color:red";

이와 같은 CSS 속성을 사용해야 합니다：

element.style.backgroundColor = "red";

직접 시도해 보세요

점 2

JavaScript 문법과 CSS 문법은 약간 다릅니다：

backgroundColor / background-color

우리의 전체 스타일 객체 참조 매뉴얼。

점 3

이 스타일 속성을 사용하세요 대신 setAttribute() 메서드스타일 속성 내 다른 속성을 덮어쓰지 않도록 하기 위해。

다음을 참조하세요：

CSS 강의

CSS 참조 매뉴얼

스타일 객체

HTML <style> 태그

예제

예제 1

"myH1"의 색상을 변경합니다：

document.getElementById("myH1").style.color = "red";

직접 시도해 보세요

예제 2

"myP"의 상단 경계의 값을 가져옵니다：

let value = document.getElementById("myP").style.borderTop;

직접 시도해 보세요

문법

style 속성을 반환합니다：

element.style.property

style 속성을 설정합니다：

element.style.property = value

속성 값

값 설명
value

속성 값을 지정합니다。

예를 들어：

element.style.borderBottom = "2px solid red"

반환 값

타입 설명
객체 요소의 CSSStyleDeclaration 객체。

브라우저 지원

element.style DOM Level 2 (2001) 기능입니다。

모든 브라우저는 완전히 지원합니다：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원