如何使用jQuery动态更改css的属性

Question

I am trying to style the DIV using javascript. If the user clicks the DIV, it will dynamically change the value of the property passed after onclick. I want to try this in order to save my code that's why I chose jquery css. But, the property is not working. Is this possible or is there any other way to make it happen? thanks

   <script> 
       function changeProperty(mine , property , value){
          $(mine).css({ property :  value }); //if I change the property to 'background' for example, it works properly, but I want property to remain so that i will not be changing the property from time to time
       }
   </script>
   <div  onclick="changeProperty(this, 'background', 'red');">
      change background
   </div>
   <div  onclick="changeProperty(this, 'font-size', '15px');">
      change font size
   </div> 
   <div  onclick="changeProperty(this, 'font', 'Arial');">
      change font
   </div>

Answer 1

That's because you pass to css method an object containing property property. In this case it's better to pass two arguments to css method:

function changeProperty(mine , property , value){
    $(mine).css(property, value);
}

However, if you want to pass an object, you can dynamically build it:

function changeProperty(mine , property , value){
    var obj = {};
    obj[property] = value;
    $(mine).css(obj);
}

Another improvement is to use this value inside of the function (that is the same with mine in this case):

function changeProperty(property , value){
    $(this).css(...);
}

Then in HTML you will have changeProperty.call(this, "font", "Arial") .

.css( propertyName, value )

Set one or more CSS properties for the set of matched elements.

• propertyName : A CSS property name.

  Type: String

• value : A value to set for the property.

  Type: String or Number

Answer 2

Try passing the values into the function by wrapping them directly into an object:

  <script> 
       function changeProperty(mine, css){ 
          $(mine).css(css);
       }
   </script>
   <div  onclick="changeProperty(this, {'background' : 'red'});">
      change background
   </div>
   <div  onclick="changeProperty(this, {'font-size' : '30px'});">
      change font size
   </div> 
   <div  onclick="changeProperty(this, {'font-family' : 'Arial'});">
      change font
   </div>

http://jsfiddle.net/kLd6vp9c/

Answer 3

Noticed in your question, you had some doubt when choosing the jquery framework to implement this feature. I think the time is approaching where we might have to start letting go if jquery and looking into a more native approach, HTML5 is personally seeing to it that it happens. Here is an open minded and a more bold approach, an alternative if you may, to solving your problem and giving a performance boost to you code.

function changeProperty(mine , property , value){
mine.style[property] = value;
}

Refer to this link to find out the exact property names you are trying to apply, http://www.w3schools.com/jsref/dom_obj_style.asp Thats it!! call your onclick event handler exactly like it is. This post is not to knock on jquery, i'm a huge fan myself.. God knows i learned a ton from that framework. But its high time we start implementing native code and thinking about leveraging performance from all the hard work HTML5 is putting into promoting the web as a platform.