javascript styling element with custom function

Question

I want to style element in javascript easily but this function doesn't work

const addStyles = function (el, styles) {
    Object.assign(el.style, styles);
}

Balastrong · Accepted Answer · 2021-09-14 17:39:50Z

1

You need to get the element first, then access the style property (it's a string) and set your CSS there.

Here's an example. As you can see the text is black and there is no CSS, however, with the javascript line I can make it red.

function addStyles(element, style) {
  element.style = style;
}


const myElement = document.getElementById("myText");

addStyles(myElement, "color: red; font-size: 25px;");

<p id="myText">Some text<p>

answered Sep 14, 2021 at 17:39

Balastrong

4,4602 gold badges14 silver badges32 bronze badges

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

3 Comments

Nika Jobava Over a year ago

I know that but I want sth like that ` addStyles(span, { width: "200px", height: "300px", background: "#fa00ff" });

Nika Jobava Over a year ago

it says: Uncaught TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Indexed property setter is not supported.

Balastrong Over a year ago

It means you're probably getting wrong the element. In the example above it works. Feel free to add more details in the question with your code.

Collectives™ on Stack Overflow

javascript styling element with custom function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related