What was that other way to set CSS styles?

[kirupa]

@senocular - a while ago, as part of your JS Tips of the Day, there was a clever approach for setting CSS styles on elements that you came up with. Do you remember what that is? I’m planning on revising the old tutorial on this, and I want to include your approach as well.

[senocular]

Hmm. not sure. Do you mean this?

JS Tip of the Day: Setting HTML Element Styles

Setting HTML Element Styles Level: Beginner In JavaScript, you can set css styles for an element using its style property. This mirrors the style attribute in HTML but with a couple of important differences. First, the style property is an object in JavaScript, not a string value as it is in the HTML attribute. This object is a CSSStyleDeclaration object with each of the individual style declarations defined as properties of that object. <div id="warning" style="color: red"> Danger, Will R…

Not sure if there’s anything clever there. I searched through a few of the other tips to see if there was anything else I was doing but nothing jumped out.

Sometimes I will do something like this, maybe something like this is what you remember seeing?

let color = "red"
let fontSize = "2em"
let fontWeight = "bolder"

Object.assign(element.style, {
  color,
  fontSize,
  fontWeight,
})

Edit: I just found a tip that does this ^: JS Tip of the Day: MutationObserver

P.S. I noticed a few broken links in the Tips page. I didn’t check them all but these are the ones I found that were broken or needed fixing:

• Reduce Code with Destructuring → JS Tip of the Day: Reduce Code with Destructuring
• Numeric literal formats → JS Tip of the Day: Numeric Literal Formats
• Proxy Objects → JS Tip of the Day: Proxy Objects
• Detecting Dark Mode → JS Tip of the Day: Detecting Dark Mode

[kirupa]

Yes, that is it! Thanks

(Regarding the broken links, I’ll go through and see what happened there!)