JSFiddle - React, Tailwind, and code Playground

by TrySpace

HTML

<DIV id="main">
    Content
</DIV>

<DIV id="check">
    JSON:
</DIV>

CSS

#main
{
position: absolute;        
    
}

#check

{
position: absolute;
top: 200px;    
}

JavaScript

//json1 = "{ 'top': '10px'}";
//json2 = eval(json);
json3 = '{ "top": "50px"}';

    $('#check').append(json3);    


    //$('#main').css({'top': '50px'}); //will work

    //$('#main').css(json1); //won't work
    
    //$('#main').css(json2); //won't work

    //$('#main').css(json3); //won't work


var cssObject = JSON.parse(json3);
$("#main").css(cssObject); //works