Pass a css properties array to the .css method

Question

I create an array from splitting a string which have the css properties and then I pass the array to the css method but it doesn't work.

var cssString = "'top':'25px', 'height':'400px'";
var cssArray = new Array;
cssArray = cssString.split(",");
$("#div").css(cssArray);

Satpal · Accepted Answer · 2014-07-06 16:26:17Z

1

You can convert your string in JSON object then pass it .css() method.

var cssString = "'top':'25px', 'height':'400px'".replace(/'/g, '\"'); // replace single quotes
var jsonStrring = "{" + cssString + "}"; //Create a string in JSON format
var jsonObject = JSON.parse(jsonStrring); //Convert to JSON object
$("#div").css(jsonObject); //Pass JSON object

edited Jul 6, 2014 at 16:26

answered Jul 6, 2014 at 16:21

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

4 Comments

Guffa Over a year ago

I was thinking in that direction too, but it's not valid JSON syntax. "SyntaxError: JSON.parse: expected property name or '}' at line 1 column 2 of the JSON data"

Satpal Over a year ago

@Guffa, Thanks for pointing out fixed problem (with single quotes) jsfiddle.net/7trvW

user2409347 Over a year ago

Wow thanks for the answer, it works perfectly! I thought that the css method was working with normal arrays. One last question: Why is it necessary replace the single quotes? I need to read more about json.

Satpal Over a year ago

@user2409347, Read jQuery single quote in JSON response Proper reason is provide. To sum up "single quotes is not allowed."

Joe Enos · Accepted Answer · 2014-07-06 16:25:36Z

0

If your string was valid JSON, you could parse it into an object and call $("#div").css(cssJsonObject);.

Since it's not valid JSON (no curly brackets, and the wrong quotes), you'll need to either make sure your string is valid JSON and parse it accordingly, or start with a valid javascript object in the first place, like:

var cssObject = {top:"25px", height:"400px"};
$("#div").css(cssObject);

answered Jul 6, 2014 at 16:25

Joe Enos

40.6k11 gold badges86 silver badges144 bronze badges

Collectives™ on Stack Overflow

Pass a css properties array to the .css method

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest