Allowed propertyName for Javascript setProperty [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 4 months ago.

Improve this question

I'm using javaScript setProperty(propertyName, value) a lot and it works perfectly until I want to set properties like justifyContent when using flexboxes.

It does work with the propertyName 'flexDirection' - I can change from row to column or vice verse.

Now when I want to set the 'justifyContent' propertyName to 'flex-start', 'center', 'left' it looks like it just doesn't execute it (or ignores it). It works of course when specifically use something like object.style.justifyContent = "flex-end"

I have a feeling that there is a restricted list of propertyNames for which one can use the setProperty. I tried to look for a list of allowed propertyNames but couldn't find it anywhere which makes me doubt that this is the problem (it can't be that I'm the first one to question this).

Also possible that the naming convention flexDirection or justifyContent is different.

Biggest chance is that I'm overseeing something stupid because of my lack of experience:D.

Can anyone point me in the right direction or any ideas where I can find out answer to this mystery?

Please provide code (HTML, JS, CSS) that reproduces the issue you describe. — trincot
– trincot, Commented Jul 20 at 8:07

tmf · Accepted Answer · 2025-07-20 09:15:15Z

3

CSSStyleDeclaration.setProperty accepts property names in hyphen-case:

let element = document.createElement("div");
let cssProperties = element.style;

// does nothing
cssProperties.setProperty("justifyContent", "flex-end");

// works
cssProperties.setProperty("justify-content", "flex-end");

// also does nothing
cssProperties.setProperty("justify-content", "something"):

// works, not recommended
cssProperties.setProperty("justify-CONTENT", "flex-start")

console.log(element.outerHTML);
// '<div style="justify-content: flex-start"></div>'

The property name is - per specification - converted to ASCII lowercase before matching against supported CSS properties.

answered Jul 20 at 9:15

tmf

412 bronze badges

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

1 Comment

Sammie Jul 21 at 9:29

Thanks!!! Great help. It is weird though that 'flexDirection' apparently does work and put me on the wrong track I think (although maybe I'm assuming it wrongly). Nevertheless this solves everything for me and makes life a lot simpler.

Atlas · Accepted Answer · 2025-07-22 19:28:34Z

0

You're very close! The issue lies in how you're using setProperty. The method you're using is correct, but the property name must be in CSS syntax, not JavaScript camelCase.

Correct usage with setProperty:

element.style.setProperty('justify-content', 'center');

The reason flexDirection works when using style.flexDirection = ... is because you're using the JavaScript property name, which expects camelCase.`

But setProperty works with CSS custom properties and styles, which follow kebab-case (with hyphens), like justify-content, background-color, etc.

edited Jul 22 at 19:28

Atlas

3692 silver badges13 bronze badges

answered Jul 20 at 13:42

Mayank

12 bronze badges

2 Comments

trincot Jul 20 at 14:18

Welcome, Mayank. Just want to point out that you used code formatting for phrases that are not code. If you want to draw attention to some words then use italics or bold.

Sammie Jul 21 at 9:30

Mayank, thanks for your help. Your answer is the same as tmf, you were first, however most important: the mystery is solved. Thanks again.

Collectives™ on Stack Overflow

Allowed propertyName for Javascript setProperty [closed]

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related