The cssText property in JavaScript
The cssText property allows you to set multiple CSS styles for an element in one line at once. This is useful when you need to quickly apply multiple styles without using separate properties of the style
object.
element.style.cssText = 'rule1; rule2; ...';
A real code example for applying multiple styles
let box = document.getElementById('myBox');
box.style.cssText = 'width: 200px; height: 100px; background: black;';
An example of adding new styles without deleting the old ones
box.style.cssText += 'border: 2px solid black;';
If you refer to cssText
, it will return the data as a string
console.log(box.style.cssText);
// "width: 200px; height: 100px; background: black;"
If you want to add styles without overwriting existing ones, it is better to use classList.add()
to work with classes or separate style
properties.
cssText is a fast way to apply styles en masse, but you need to be careful with it: it removes all previous inline styles. If the style of the element changes dynamically, it is better to use style.property
or classes.