how to dynamically change the property of css using jquery


Tags: javascript,jquery,css

Problem :

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>


Solution :

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


    CSS Howto..

    How do I select the TD of the TH to which it references with only CSS?

    How best to store and download resource files on the page?

    How to use both jQuery styles and css style sheet?

    How to Change a Plugin's CSS

    SCSS / Sass: How do i change a mixin to output specific CSS?

    How can I create a footer/toolbar in an iPhone web app?

    How can write a CSS style for a parent class?

    How do I adjust position of a text inside a Bootstrap panel with overriden max-height?

    How to achieve table's centering capabilities without tables

    How to make the background image responsive

    How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?

    How do I make buttons that have the same transitions and some of the same properties, but then also have some differing properties?

    How to scroll with large pages with jQuery onepage-scroll plugin?

    how to fix the button so that they don't scroll with contents

    I have a simple image picture slider with JQuery, but I do not know how to animate up or down

    How can I fit the iframe height at 100%?

    CSS: how to enforce word wrap on an odd situation?

    How to draw two non-concentric circles in CSS with numbers inside it?

    How to make this text bigger?

    How do I absolute position a div from left to the right using media queries?

    Rails: how to style submit tag with custom css

    How to convert a .PNG file into a source code that can be stored into mysql and called up via CSS as “png”

    How to change html (jade template) to use *.min js and css in production?

    When displaying an image in my directory, how to add a return (or back) button to it?

    how to remove element.style in css

    How to Move Parent Div Position using css on hover

    How to avoid Zalgo text bleeding all over place without totally removing it?

    How to create a CSS only (vertical) drop-down menu?

    How to hide a column in the Webgrid in aspasp.net MVC?

    How to change CSS Class of an image in ListView depending on content in ASP.NET // C#