HTML DOM 스타일 속성

<h1> 요소에 빨간색 추가:

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

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

style 속성은 요소의 스타일 속성을 나타내는 CSSStyleDeclaration 개체를 반환합니다.

style 속성은 다른 CSS 속성을 사용하여 요소의 특정 스타일을 가져오거나 설정하는 데 사용됩니다.

참고: 스타일 속성에 문자열을 할당하여 스타일을 설정할 수 없습니다(예: element .style = "color: red;"). 요소의 스타일을 설정하려면 "CSS" 속성을 style에 추가하고 다음과 같이 값을 지정합니다.

element.style.backgroundColor = "red"; // set the background color of an element to red

보시다시피 CSS 속성을 설정하기 위한 JavaScript 구문은 CSS(background-color 대신 backgroundColor)와 약간 다릅니다.

사용 가능한 모든 속성 목록은 스타일 개체 참조 를 참조하십시오 .

참고: style 속성은 요소의 인라인 스타일 속성에 설정된 CSS 선언만 반환합니다(예:
<p style="color: red;">). 이 속성을 사용하여 문서 또는 외부 스타일 시트의 <head> 섹션에서 스타일 규칙에 대한 정보를 가져올 수 없습니다.

그러나 document.getElementsByTagName()을 사용하여 <head>에서 <style> 요소에 액세스할 수 있습니다.

var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element

참고: style 속성은 style 속성에 지정될 수 있는 다른 CSS 속성을 덮어쓰지 않기 때문에 요소 .setAttribute("style", "...") 메서드 대신 style 속성을 사용하는 것이 좋습니다 .

Property
style	Yes	Yes	Yes	Yes	Yes

반환 스타일 속성:

element.style.property

스타일 속성 설정:

element.style.property = value

Value	Description
value	Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red";

반환 값:	요소의 스타일 속성을 나타내는 CSSStyleDeclaration 객체
DOM 버전	DOM 레벨 2 CSS

<p> 요소의 상단 테두리 값을 가져옵니다.

var x = document.getElementById("myP").style.borderTop;