DOM 요소의 CSS 스타일 속성값 설정하기

자바스크립트로 DOM 요소의 CSS 스타일 속성값을 설정(변경)하는 방법에 대해 알아봅니다.

자바스크립트로 특정 요소의 CSS 스타일 속성값을 설정하는 방법은 다양합니다.

  • 인라인 스타일로 속성 값을 설정하기
  • 외부나 내부 스타일 시트에서 정의된 CSS 규칙 변경하기
  • 동적으로 내부나 외부 스타일 시트 변경하기
  • 요소에 클래스 값 변경을 통한 스타일 값 설정하기
  • ...

여기에서는 자바스크립트로 CSS 속성의 값을 설정할 때 가장 일반적으로 사용하는 방법인 '인라인 스타일로 속성 값을 설정하기'에 대해 다룹니다.

인라인 스타일

인라인 스타일은 CSS로 스타일을 적용할 요소 내에 style 속성을 이용해서 해당 요소에만 스타일을 적용하는 것을 말합니다.

HTML 
<h2 style="color: white; background-color: black;">
    style 속성
</h2>
<p style="color: gray;">
    CSS로 스타일을 적용할 요소 내에 style 속성을 이용해서
    해당 요소에만 스타일을 적용하는 것을 말합니다.
</p>

인라인 스타일로 속성 값을 설정하기

인라인 스타일은 요소의 HTML style 속성에 직접 스타일 속성의 값을 설정하는 방법입니다.
인라인 스타일은 다른 스타일 규칙보다 스타일 우선순위에서 우선 적용되므로, 해당 요소에 대한 세부 스타일을 제어할 때 유용합니다

인라인 스타일로 스타일 속성의 값을 설정하는 방법은 두 가지가 있습니다.

  1. element.style.propertyName = value
  2. setProperty()

이 두 가지 방법에 대해 알아보겠습니다.

element.style.propertyName = value

자바스크립트로 CSS 속성의 값을 설정할 때 가장 일반적으로 사용하는 방법입니다.

기본 개념

element.style.propertyName은 해당 요소(element)의 인라인 속성(propertyName) 값을 설정합니다.

JavaScript 
element.style.backgroundColor = "blue";
구문
JavaScript 
element.style.propertyName = value
매개변수
element.style.propertyName='value'의 매개변수
element 인라인 스타일 값을 설정할 DOM 요소 객체입니다.
propertyName CSS 속성 이름입니다. 이 속성 이름은 하이픈(-)이 있을 경우에는 카멜 케이스(camelCase) 형식으로 작성해야 합니다. 예를 들어, 글자색을 지정하는 CSS의 color속성은 element.style.color로 지정하면 되지만 배경색을 지정하는 CSS의 background-color는 element.style.backgroundColor와 같이 카멜 케이스 형식으로 지정합니다.
value 속성에 할당할 CSS 값입니다. 이는 문자열로 지정되며, 속성에 맞는 유효한 CSS 값이어야 합니다. 예를 들어, "blue", "16px" 등이 있습니다.
예제
HTML 
<p id="my-element">p 요소입니다.</p>
JavaScript 
const element = document.getElementById("my-element");
element.style.backgroundColor = "blue";

코드 부연설명
getElementById() 함수는 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성을 가진 요소 객체를 반환합니다.

setProperty()

setProperty() 함수는 스타일 객체(CSSStyleDeclaration 객체)에서 원하는 속성의 값을 설정하는 함수입니다.

JavaScript 
element.style.setProperty("background-color", "blue");
구문
JavaScript 
element.style.setProperty(propertyName, value)
element.style.setProperty(propertyName, value, priority)
매개변수
setProperty() 함수의 매개변수
element 인라인 스타일 값을 설정할 DOM 요소 객체입니다.
propertyName 값을 설정할 속성 이름(CSS 속성 이름)을 나타내는 문자열입니다.
예를 들어, background-color, font-size 같은 CSS 속성명을 그대로 사용합니다.
value 속성에 할당할 CSS 값입니다. 이는 문자열로 지정되며, 속성에 맞는 유효한 CSS 값이어야 합니다. 예를 들어, "blue", "16px" 등이 있습니다.
priority 옵션.
우선순위를 부여하는 !important 선언을 설정할 수 있습니다.
값은 문자열로 지정하며, 값을 지정하지 않으면 빈 문자열("")이 기본값으로 지정됩니다.
  • 빈 문자열(""): 기본값이며 우선순위를 부여하지 않습니다. 이는 우선순위를 사용하지 않겠다는 의미입니다.
  • "important": 우선순위를 부여하는 !important 선언합니다. 이렇게 하면 해당 속성이 다른 스타일 규칙보다 우선해서 적용됩니다.
예제
HTML 
<p id="my-element">p 요소입니다.</p>
JavaScript 
const element = document.getElementById("my-element");
element.style.setProperty("background-color", "blue"); // 배경색 설정
element.style.setProperty("color", "orange", "important"); // 글자색 설정과 함께 !important 선언 설정

브라우저 호환성

인라인 스타일로 속성 값을 설정하기에 대한 브라우저 호환성
속성과 메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
element.style 1 12 1 3
setProperty() 1 12 1 6

명세서

인라인 스타일로 속성 값을 설정하기에 대한 명세서 사양
명세서 사양
element.style CSS Object Model (CSSOM)
#dom-elementcssinlinestyle-style
setProperty() CSS Object Model (CSSOM)
#dom-cssstyledeclaration-setproperty

참고문헌

같이 보기