Question 37063 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can't get multiple values for css property JS – Jquery

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%);";
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search