cssText property

The cssText property allows you to set CSS styles in bulk in one line. In this case, the entire content of the style attribute is overwritten.

Syntax

javascriptelement.style.cssText = 'property 1: value; property 2: value...'

Example

Let's give an element some styles:

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

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

Example

In this example, an element will initially have styles in the style attribute, but the cssText property will overwrite it:

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

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

Example

To prevent previous styles from being overwritten, you can do this:

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

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

See also