Is it possible to pass variables to jquery's css function?

Question

I'd like to set css of a div element dynamically using jQuery css() function instead of using string literals/ string constants for the css() function. Is it possible?

Instead of using the following codes with string literals:

$('#myDiv').css('color', '#00ff00');

I would like to use variables to set css for #myDiv element like

Version 1:

var propertyName = get_propery_name(myVariable1); // function get_propery_name() returns a string like 'background-color'
var value = get_value(myVariable2) ; //  function get_value() returns a string like '#00ff00'
$('#myDiv').css(propertyName, value);

Version 2: (just hard coded to see if they work without calling custom functions like version 1 above):

var propertyName = 'background-color';
var value = '#00ff00';
$('#divLeftReportView').css(propertyName, value);

Both variable versions of codes do not work. Please help. Thanks.

There is nothing special in it. Both variants should work well: jsfiddle.net/UQWyH — VisioN
– VisioN, Commented May 16, 2012 at 14:03
Did this answer your question? Please accept an answer if one of them helped you — Brian Webster
– Brian Webster, Commented Aug 8, 2012 at 20:12

James Hill · Accepted Answer · 2012-05-16 14:19:03Z

2

Both of your examples will work just fine. I would suggest just a bit cleaner approach (personal syntax preference):

$(document).ready(function () {
    $('#myDiv').css(get_propery_name(myVariable1), get_value(myVariable2));
}

Here's a working fiddle.

If you want to take it a step further, you can return a CSS map instead of strings:

$('#divLeftReportView').css(GetCssMap("foo"));

function GetCssMap(mapIdentifier) {
    return { "background-color" : "#00ff00" }
}

Here's a working fiddle.

edited May 16, 2012 at 14:19

answered May 16, 2012 at 14:10

James Hill

62.2k22 gold badges150 silver badges166 bronze badges

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

Comments

Jeffrey Blake · Accepted Answer · 2012-05-16 14:07:59Z

1

The code you posted here should work. I have done both versions of what you are trying to do several times. If it is not working, there is a good chance that something is wrong somewhere else in your javascript OR that you do not have the correct selector/id for the element(s) which you want to change.

Try adding alert("test"); immediately after $('#divLeftReportView').css(propertyName, value);. If you get the popup saying "test" then the problem is with your selector. If not, then the problem is a bug in your javascript.

Also try adding $('#divLeftReportView').css("background-color", "#00ff00"); in the same place. That will confirm whether or not the selector is working.

answered May 16, 2012 at 14:07

Jeffrey Blake

9,7396 gold badges46 silver badges67 bronze badges

1 Comment

user1219702 Over a year ago

Thanks. I found the problem is I use upper case for property name like BACKGOUND-COLOR for jQuery css() method, so my codes did not work with things like $('#divLeftReportView').css("BACKGOUND-COLOR", "#00ff00"); It turns out the property name must be lower case. So, the codes should be $('#divLeftReportView').css("background-color", "#00ff00");

Gabriele Petrioli · Accepted Answer · 2012-05-16 14:08:23Z

1

Seems to work fine at http://jsfiddle.net/gaby/6wHtW/

Make sure you run your code after the DOM ready event..

$(function(){
    var propertyName = 'background-color';
    var value = '#00ff00';
    $('#divLeftReportView').css(propertyName, value);
});

otherwise your elements might not be present in the DOM..

answered May 16, 2012 at 14:08

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

2 Comments

user1219702 Over a year ago

What if the value for the 'value' variable is got from an input textbox (user enters) like: var value = $('#myTextBox').val(); ? What I mean is how the value of 'value' variable is converted to a string literal or string constant?

Gabriele Petrioli Over a year ago

since it is a string it will work as is... whether you pass a string literal or a variable holding a string it is the same thing..

Arthur Tarasov · Accepted Answer · 2017-03-26 04:37:08Z

1

You can also pass multiple CSS parameters within one variable as an array:

$(function(){
    var divStyle = {'background-color': '#00ff00', 'color': '#000000'}
    $('#divID').css(divStyle);
});

answered Mar 26, 2017 at 4:37

Arthur Tarasov

3,8399 gold badges52 silver badges61 bronze badges

Comments

Shiwantha Viraj · Accepted Answer · 2021-03-31 18:36:45Z

0

yes, using jQuery attr method you can change css dynamically

var height=$(".sampleClass1").innerHeight();
$('.sammpleClass2').attr('style', 'min-height:'+height+' !important');

answered Mar 31, 2021 at 18:36

Shiwantha Viraj

3413 silver badges8 bronze badges

Collectives™ on Stack Overflow

Is it possible to pass variables to jquery's css function?

5 Answers 5

Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related