javascript [object Object]为字符串

时间:2012-06-01 17:51:04

标签: javascript jquery html json

我将从一点背景开始。

所以我要做的是从元素中获取“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都很好。

谢谢!

3 个答案:

答案 0 :(得分:5)

  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

答案 1 :(得分:2)

这样的事情可能会满足你的需求:

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

答案 2 :(得分:2)

使用.replace

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

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