[JS] 인라인 스타일 정의 - cssText

cssText는 새로운 요소에 여러 스타일을 추가해야 할 때 유용하다.
기존 인라인 스타일을 완전히 교체하므로 그 외 상황에선 잘 사용하지 않는다.

 

자바스크립트를 이용해 엘리먼트 스타일을 수정할 땐 elem.style.propertyName(프로퍼티 이름은 카멜 케이스 사용) 으로 접근한 뒤 원하는 스타일 값을 할당하는 방식을 사용한다. 하지만 여러 스타일을 추가할 때마다 일일이 propertyName으로 접근하기엔 조금 번거롭다.

// CSS 파일에 width, height, margin, font-size 등의 스타일이 적용된 엘리먼트
const $header = document.querySelector('.header');
$header.style.fontSize = '20px';

 

🔍 엘리먼트의 style 속성(attribute)에 스타일을 작성하는 방식을 인라인 스타일이라고 한다.

e.g. <div style="color: gold; font-size: 30px;">

 

이땐 자바스크립트를 이용해 인라인 스타일을 정의할 수 있는 cssText를 활용할 수 있다. cssText 값을 조회하면 인라인 스타일 내용만 반환한다. 스타일 시트에 정의한 내용은 반환하지 않는다. cssText 안에선 스타일시트 문법을 그대로 사용할 수 있다.

console.log($header.style.cssText); // ''
$header.style.cssText = 'font-size: 10px; color: gold;';
console.log($header.style.cssText); // 'font-size: 10px; color: gold;'

 

cssText는 사용할 때마다 기존 인라인 스타일을 완전히 교체하는 방식이기 때문에 주의한다. 또한 인라인 스타일의 우선순위가 더 높으므로 스타일 시트에 작성한 동일 프로퍼티 값은 무시한다.

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요