cssText 속성

cssText 속성을 사용하면 CSS 스타일을 한 줄에 대량으로 지정할 수 있습니다. 이렇게 하면 style 속성의 전체 내용이 덮어씌워집니다.

문법

javascript요소.style.cssText = '속성1: 값; 속성2: 값...'

예제

요소에 여러 스타일을 지정해 봅시다:

html<p id="elem"></p>

javascriptlet elem = document.querySelector('#elem');
elem.style.cssText = 'color: red; font-size: 40px;';

예제

이 예제에서 요소는 처음부터 style 속성에 스타일이 있지만, cssText 속성이 이를 덮어씁니다:

html<p id="elem" style="background: red;"></p>

javascriptlet elem = document.querySelector('#elem');
elem.style.cssText = 'color: red; font-size: 20px;';

예제

기존 스타일이 덮어씌워지지 않도록 하려면, 다음과 같이 할 수 있습니다:

html<p id="elem" style="background: green;"></p>

javascriptlet elem = document.querySelector('#elem');
elem.style.cssText += 'color: red; font-size: 20px;';

함께 보기