Adding a style attribute without removing the previous styles

Question

I have 3 different functions that set a specific style attribute to an element, invoked by clicking 3 different buttons, for example:

element.setAttribute("style","fill:#00ffff");
element.setAttribute("style","fill:#ff00ff");
element.setAttribute("style","fill:#ffff00");

THEN, I have another function invoked by a forth button that updates the style of the same element.

element.setAttribute("style", "transform:translate(29.5%,0px)";

The problem is that when it updates it, the previous attributes, set by the first 3 functions, are removed, so button no#4 translate the element, but the element loses it's fill.

Since the colors are not fixed, I can't solve it by

element.setAttribute("style", "transform:translate(29.5%,0px);fill:#ffff00";

I was hoping for a way that ADDS the attribute rather than update it. I hope I got everything clear for you guys, any ideas?

No libraries allowed for this problem

user_9478327 · Answer

from https://www.w3schools.com/jsref/met_element_setattribute.asp :

Bad

element.setAttribute("style", "background-color: red;");

Good

element.style.backgroundColor = "red";

By choosing the second way, you only overwrite the thing you need

Adding a style attribute without removing the previous styles

1 Answers

Bad

Good