JS question: setting new elements styles pragmatically vs with external css?

[candycanearter07]

hi,

I'm working on (another) thing that creates elements with document.createElement(), and I was wondering: Is it "better" to set all the elements' style with element.style.x = y or by creating an entirely seperate css sheet to import?

Also, is there any way to set a class's style with js? Like changing the right: attribute for all elements in a class?

[Rose]

Hey 🙂 Will give a shot at answering although I am not sure I 100% understand the context behind your question so it might not fit what you are looking for.

and I was wondering: Is it "better" to set all the elements' style with element.style.x = y or by creating an entirely seperate css sheet to import?

I feel like the answer is "it depends" but I think my instinct would be to assign them all the same class name and then have a stylesheet that targets that class name. So like

Code

let spanElement = document.createElement("span");
spanElement.className = "cute-little-span"
document.body.appendChild(span);

...and then in your style.css (or whatever)

Code

.cute-little-span {
  color: red;
}

.... Is that kind of the answer you were looking for?

[candycanearter07]

.... Is that kind of the answer you were looking for?

That seems to solve the issue I had, thanks. However, I assume that you had meant to put down spanElement.className = "cute-little-span" instead of span.className = "cute-little-span", since I don't think span is defined here? also, do you happen to know how to set the style for an entire class through the javascript? thanks!

[Rose]

I assume that you had meant to put down spanElement.className

Ah yes typo sorry 🙂 Fixed it!

Also, is there any way to set a class's style with js? Like changing the right: attribute for all elements in a class?

Not with vanillaJS that I know of 🤔 I think there's "css-in-js" libraries that might sort-of accomplish that. I know this was popular with the React community for awhile. I don't think I'd recommend it myself!

Possible suggestion that might work for you depending on what you need - You could use CSS variables and modify them with CSS.

So with the CSS you could have like

Code

:root {
  --text-color: black;
}

.my-cute-span {
  color: var(--text-color);
}

and then in JS you could modify variables

Code

let root = document.querySelector(':root');
root.style.setProperty("--text-color", "pink");