I'm trying to use the browser's built in type CSSStyleDeclaration to programatically pass around and modify styles (which is handy because of the .cssText property).

However, new CSSStyleDeclaration() throws an Illegal Constructor error. So I tried Object.create(CSSStyleDeclaration.prototype), which appears to work, but the resulting object doesn't behave normally. For example, calling .cssText on a CSSStyleDeclaration created this way throws an Illegal invocation.

Is there a "right" way to construct CSSStyleDeclaration? Or is there a better way to create styles programmatically using the built-in types?

(I don't want to do string manipulation and I'd rather avoid making my own types or adding a 3rd party dependency.)

I'm trying to use the browser's built in type CSSStyleDeclaration to programatically pass around and modify styles (which is handy because of the .cssText property).

However, new CSSStyleDeclaration() throws an Illegal Constructor error. So I tried Object.create(CSSStyleDeclaration.prototype), which appears to work, but the resulting object doesn't behave normally. For example, calling .cssText on a CSSStyleDeclaration created this way throws an Illegal invocation.

Is there a "right" way to construct CSSStyleDeclaration? Or is there a better way to create styles programmatically using the built-in types?

(I don't want to do string manipulation and I'd rather avoid making my own types or adding a 3rd party dependency.)

• javascript
• html
• css

3 Answers 3

you may create a temporary DOM element and use its style property:

const rules = document.createElement('span').style;
rules.backgroundColor = 'red';
rules.cursor = 'pointer';
rules.color = 'white';

document.getElementById('style_string').innerHTML = rules.cssText;
document.getElementById('obj').style = rules.cssText;

<pre id="style_string"></pre>
<div id="obj">TEST</div>

Like you can add/edit styles by working the properties:

document.querySelector("h1").style.color = '#369'

You can also assign the style object multiple stylerules:

const h1 = document.querySelector("h1")
const rules = {
    color: '#369',
    width: '100px'
}
Object.assign(h1.style, rules)

And then add more rules without destroying the existing inline-styles:

const moreRules = {
    margin: '35px',
    height: '100px'
}
Object.assign(h1.style, moreRules)

Proof:

h1.style.cssText
// "color: rgb(51, 102, 153); width: 100px; margin: 35px; height: 100px;"

Can not create CSSStyleDeclaration object, But with setProperty method on CSSStyleDeclaration will make things easy and re-use the styles (as objects).

We can use hyphen-case and able to set priority as well.

const applyStyles = (element, styles) => {
  Object.entries(styles).forEach(([prop, val]) => {
    const [value, pri = ""] = val.split("!");
    element.style.setProperty(prop, value, pri);
  });
};

const parent_styles = {
  "font-size": "18px",
  "font-weight": "bold",
  "background-color": "lightgrey",
  color: "red",
  padding: "10px !important",
  margin: "20px",
  width: "100px !important",
  border: "1px solid blue"
};

const child_styles = {
  "font-size": "18px",
  "background-color": "white",
  color: "green"
};

const parent = document.getElementById("parent");
const child = document.getElementById("child");

applyStyles(parent, parent_styles);
applyStyles(child, child_styles);

<div id="parent"> 
    Hello
    <div id="child"> World </div>
</div>