How to apply string styles to HtmlElement?

Question

I have tried this way to join all styles in string:

pointElement.style = `
    display: 'block',
    left: ${(rotated_x + w / 2) / scale}px,
    top: ${(h / 2 - rotated_y) / scale}px`;

It is not applied.

`.style` is an object, not a string. Just apply each one individually. Or merge your two objects. — VLAZ, May 18 '21 at 10:06
[How can I merge properties of two JavaScript objects dynamically?](https://stackoverflow.com/q/171251) — VLAZ, May 18 '21 at 10:08
There is few answers: `element.style.left = "20px"` or div.style.cssText=`color: red !important; background-color: yellow; width: 100px; text-align: center; `; — Greg--, May 18 '21 at 10:10

score 0 · Accepted Answer · answered May 18 '21 at 10:09

You can use this,

pointElement.style.display = 'block';
pointElement.style.left = `${(rotated_x + w / 2) / scale}px`;
pointElement.style.top = `${(h / 2 - rotated_y) / scale}px`;

But don't forget to use position: absolute; CSS property to apply your left and top properties. You will also need to have a container element which has position: relative; CSS property for absolute positioning of your inner pointElement.

How to apply string styles to HtmlElement?

1 Answers1