how to dynamically change the property of css using jquery

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>

Don't forget to mark the correct answer by clicking ✔ button. — Ionică Bizău
– Ionică Bizău, Commented Oct 22, 2014 at 7:03

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 22, 2014 at 6:34

Ionică Bizău

114k95 gold badges311 silver badges490 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

smzdama Over a year ago

thank you so much,, it worked perfectly.. I am not yet allowed to vote up since I still need 15 reputations. But thanks..

Ionică Bizău Over a year ago

@smzrodama You cannot vote yet, but it's recommend to press ✔ button to mark the answer. You're welcome.

Chrisissorry · Accepted Answer · 2014-10-22 06:52:14Z

0

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/

answered Oct 22, 2014 at 6:52

Chrisissorry

1,5142 gold badges23 silver badges47 bronze badges

Comments

Lakmal Caldera · Accepted Answer · 2014-10-22 07:03:33Z

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.

Collectives™ on Stack Overflow

how to dynamically change the property of css using jquery

3 Answers 3

`.css( propertyName, value )`

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related