Can't get multiple values for css property JS-CodePudding

I'm having a problem with setting multiple values on the same css property in Javascript. The problem is that I can't make it so both of the properties get rendered but instead the last line gets executed.

//Map is a variable linked to an element
map.style.cssText = "transform: rotate(90deg); transform: translate(-50%, -50%);";

CodePudding user response：

You should do it this way:

temp0.style.cssText = "transform: rotate(90deg) translate(-50%, -50%);"

That's because the cssText property works like inline style, and the last occurrence of a property overrides all previous ones.

CodePudding user response：

Pls, Hover this div.

div {height: 100px; width:100px; background:yellow; border: 1px solid #000;}
div:hover {transform: translate(100px, 100px) rotate(45deg);}

<div></div>

Also, CSS uses the single-priority rule, which means - after page-rendering all your CSS is combined and converted to CSS Object Model. And, for each selector - the most prioratized CSS is set and others are overwritten, so for same selector and same CSS-Property: You will have 1 single resultant Value.