javascript [object Object] 到字符串

Question

我将从一些背景开始。

所以我想做的是从一个元素中获取“style”属性，最终的计划是将它输出到一个文本框(样式是动态的)。有了这个，我创建了一些 css 前缀，因为我只抓取计算样式。

这样，我就有了一个带有一堆 css 属性的变量，如下所示:

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)',

            };

一般fsize,tpadd,brad,bground都是用

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

但对于下面的 jsbin，我输入了静态数字。

这在记录或放入文本框中时返回为 [object Object]，这是可以预料的。但是，我希望将此对象输出为以下形式的字符串:

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

等等，我试过 JSON.stringify(compcss)，但返回为:

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

一路顺风。

使它以我想要的方式输出的最佳方法是什么？让我知道是否需要澄清。有没有更好的方法来解决这个问题？

例如，这是一个 jsbin:http://jsbin.com/opiwuy/2/edit

Vanilla Javascript 和 JQuery 都很好。

谢谢!

Answer 1

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

DEMO

你也可以这样做

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

DEMO