Propriedade cssText

A propriedade cssText permite definir estilos CSS em massa em uma única linha. Ao fazer isso, todo o conteúdo do atributo style é sobrescrito.

Sintaxe

javascriptelemento.style.cssText = 'propriedade 1: valor; propriedade 2: valor...'

Exemplo

Vamos definir vários estilos para um elemento:

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

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

Exemplo

Neste exemplo, o elemento já terá estilos no atributo style inicialmente, mas a propriedade cssText irá sobrescrevê-lo:

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

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

Exemplo

Para evitar que os estilos anteriores sejam sobrescritos, pode-se fazer o seguinte:

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

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

Veja também