javascript [object Object] na ciąg

Question

Zacznę od małego tła.

Staram się więc pobrać atrybut "styl" z elementu, a ostatecznym planem jest wyprowadzenie go do pola tekstowego (styl jest dynamiczny). W tym celu tworzę trochę prefiksu css, ze względu na fakt, że używam tylko stylów obliczeniowych.

Z tym, mam zmienną z bandą właściwości CSS jak widać tutaj:

compcss = { 
       'font-size': fsize, 
       'padding': tpadd, 

       '-webkit-border-radius': brad, 
       '-moz-border-radius': brad, 
       '-o-border-radius': brad, 
       '-ms-border-radius': brad, 
       'border-radius': brad, 

       'background': bground, 
       'background-m': bgmoz, 
       'background-o': bgop, 
       'background-i': bgie, 
       'color': 'white', 
       'text-shadow': '0 -1px 0 rgba(0, 0, 0, 0.25)', 
       'text-decoration': 'none', 
       'border': '1px solid rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)', 

      }; 

Normalnie fsize, tpadd, Brad i bground są wypełnione

document.defaultView.getComputedStyle(cssStr[0], "")[style] 

ale dla po jsbin wpisałem liczby statyczne.

Powoduje to, że jest on zapisywany lub umieszczany w polu tekstowym jako [object Object], czego można się spodziewać. Jednak chciałbym dostać ten obiekt wyprowadzanie jako ciąg w formie:

font-size: Xpx; 
padding: Ypx; 
-webkit-border-radius: Zpx; 

i tak dalej, próbowałem JSON.stringify (compcss), ale który powraca jako:

"font-fize":"Xpx","padding":"Ypx","-webkit-border-radius":"Zpx" 

na całej linii.

Jaki jest najlepszy sposób, aby uzyskać to tak, jak chcę? Daj mi znać, jeśli coś wymaga wyjaśnienia. Czy jest lepszy sposób na robienie tego?

oto jsbin na przykład: http://jsbin.com/opiwuy/2/edit

Zarówno Vanilla JavaScript i jQuery są w porządku.

Dzięki!

Answer 1

var value = ''; 
    $.each(compcss, function(key, val) { 
    value += key + ' : ' + val + ';' +'\n'; 
    }); 
    $('#css').val(value); 

DEMO

Można również zrobić

$('#css').val(function() { 
    var value = ''; 
    $.each(compcss, function(key, val) { 
     value += key + ' : ' + val + ';' + '\n'; 
    }); 
    return value; 
}); 

DEMO

Answer 2

coś takiego prawdopodobnie własnych potrzeb:

function cssStringify(myObject) { 
    var result = ""; 
    var stringObjs = JSON.stringify(myObject).split(","); 
    $.each(stringObjs, function(val) { 
     var pair = val.split(":"); 
     result = result + pair[0] + ":" + pair[1] + ";\n"; 
    }); 
    return result; 
} 

Answer 3

Wystarczy wyrzucić moją wersję z .replace

var xx = JSON.stringify(compcss); 
$('#csjson').val(
    xx.replace(/":"|":/g, ":") 
     .replace(/,"/g, "\n") 
     .replace(/"/g, "")); 

Demo:http://jsbin.com/opiwuy/4