Set CSS custom properties through Object.assign

Question

I'm trying to update CSS custom properties ("CSS variables") through JavaScript. This works:

element.style.setProperty("--foo", "bar");
element.style.setProperty("--bar", "foo");
element.style.setProperty("border", "10px solid hotpink");

But using Object.assign doesn't work. The border gets applied, but not the CSS variables --foo and --bar.

const styles = {}

styles["--foo"] = "bar";
styles["--bar"] = "foo";
styles["border"] = "10px solid hotpink";

Object.assign(element.style, styles);

Anybody know what's wrong here?

to reduce the problem, even element.style["--foo"] = "bar" will not work — Temani Afif
– Temani Afif, Commented Nov 26, 2019 at 9:36
I suppose the reason why is because the style object itself contains whitelisted, recognized CSS properties, like border. When you are attempting to assign a non-valid CSS property (e.g. CSS custom property), then it will not be set. You need to set it using .setProperty() instead. — Terry
– Terry, Commented Nov 26, 2019 at 9:39
Here's a way to do this: jsfiddle.net/khrismuc/8kqap1dn (the key is to iterate over the styles object and apply each property using .setProperty — user5734311
– user5734311, Commented Nov 26, 2019 at 11:38

Mike 'Pomax' Kamermans · Accepted Answer · 2019-11-27 16:11:44Z

1

Note that the element.style object is a convenience object for mapping styles, but it's not the "real CSS".

As per Amelia's comment, all spec-defined css properties have predefined getters/setters on the style object, but this is (necessarily) not the case for custom properties. As such, the only way to properly trigger what needs to happen is through the getProperty/setProperty mechanism.

edited Nov 27, 2019 at 16:11

answered Nov 26, 2019 at 15:59

Mike 'Pomax' Kamermans

54.3k17 gold badges133 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AmeliaBR Over a year ago

The need to use setProperty() for custom properties is the same on any CSSStyleDeclaration object, regardless of whether it's from element.style or in any other part of the CSSOM. The issue is, as you say up front, that CSS property declarations are not simple JS object properties, they need getters/setters to have an effect & only recognized CSS properties have them defined, as spec'd in these CSSOM partial interfaces.

zcorpan Over a year ago

style["background-image"] = ... does work, actually, and is specified in CSSOM as "dashed attribute".

Collectives™ on Stack Overflow

Set CSS custom properties through Object.assign

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related