CODEWITHSUNDEEP
javascripthtmlcss
MgSam
MgSam

Reputation: 12813

new CSSStyleDeclaration

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.)

Upvotes: 13

Views: 7093

Answers (3)

Onno van der Zee
Onno van der Zee

Reputation: 324

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;"

Upvotes: 5

Siva Kondapi Venkata
Siva Kondapi Venkata

Reputation: 11001

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>

Upvotes: 0

Roman86
Roman86

Reputation: 2309

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>

Upvotes: 14

Related Questions