如何使用JS动态更改CSS

Question

I am working on complicated animation, I am trying to add effects by adding another class based on the val I am getting.

I have different css classes, and I wanna know how to dynamically add them this way.

.. Class="box bottom right" 

when I add new class (eg: red). It should be in my code this way:

.. Class="box bottom right red" 

I am trying to change the css based on value I am calculating.

var els=2;

  function changeColor(els) {
    if (els>0) {
            $("box bottom right").addClass("red");
    } else{
            $("box bottom right").addClass("green");
    };

  } 

Here is code: http://jsfiddle.net/BB6ED/1/

Answer 1

You need to use . to target elements by class as well as calling your function on page load:

var els=2;

  function changeColor(els) {
    if (els>0) {
            $(".box.bottom.right").addClass("red");
    } else{
            $(".box.bottom.right").addClass("green");
    };

  }

changeColor(els);

Updated Fiddle