如何将JSON数据发送到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..

Answer 1

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);

Answer 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?

Answer 3

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);