How to send json data to jQuery.css()

Question

I want to send json formatted data to jQuery.css() function, and i dont know how to do that. Later on, i will send more properties, this is just example of my problem.

//Sorry, this var x is actually string that i get when i print my json string
var x = {"transform":"rotate(30deg)","-o-transform":"rotate(30deg)"}

//If i try to do something like this wont work
$("#mainImage").css(x);


//but following works
$("#mainImage").css({"transform":"rotate(30deg)","-o-transform":"rotate(30deg)"})

It probably has to do something that jquery accepts .css( map )
A map of property-value pairs to set.

And i am trying to send single text string, can i somehow convert json to map ?

@Pekka Yes, i am sure that $("#mainImage").css(x); doesnt work.

@Felix That is what i get by calling json = JSON.stringify(data); sorry if it not json data, i am js newbie..

Strange. $("#mainImage").css(x); should work. Are you 100% sure it doesn't? — Pekka
– Pekka, Commented Apr 8, 2011 at 9:44

cem · Accepted Answer · 2011-04-08 09:58:35Z

3

You should parse not stringify JSON before. I tried this one It's works.

var json = '{ "display": "none" }';
var cssObject = JSON.parse(json);
$("#mainImage").css(cssObject);

answered Apr 8, 2011 at 9:58

cem

1,92112 silver badges16 bronze badges

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

1 Comment

knb Over a year ago

I think you can parse with jQuery.parseJSON() to add some more backwards compatibility; JSON.parse() is available only in modern browsers

Karol · Accepted Answer · 2011-04-08 09:54:51Z

2

I've just tried with this code:

$(document).ready(function() {
        var x = {"background-color": "yellow"};
        $('body').css(x);
    });

And basically it works. So the problem can be in sth totally different. Maybe your img element is not there?

answered Apr 8, 2011 at 9:54

Karol

8,09313 gold badges51 silver badges68 bronze badges

1 Comment

grizwako Over a year ago

Yeah, its there, i should have parsed it first, that is why it didnt work.

johnlemon · Accepted Answer · 2011-04-08 10:01:20Z

0

http://jsfiddle.net/A4azg/

var cssObj = {
      'background-color' : '#ddd',
      'font-weight' : '',
      'color' : 'red',
      "transform":"rotate(30deg)",
      "-o-transform":"rotate(30deg)",
      "-webkit-transform":"rotate(30deg)"
    }
$("#mainImage").css(cssObj);

answered Apr 8, 2011 at 10:01

johnlemon

21.6k45 gold badges124 silver badges182 bronze badges

Collectives™ on Stack Overflow

How to send json data to jQuery.css()

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related