javascript [object Object] 到字符串答案

【问题标题】：javascript [object Object] to stringjavascript [object Object] 到字符串
【发布时间】：2012-06-06 23:25:53
【问题描述】：

我将从一点背景开始。

所以我要做的是从元素中获取“样式”属性，最终计划是将其输出到文本框（样式是动态的）。有了这个，我创建了一些 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 都很好。

谢谢！

【问题讨论】：

是否将对象属性放在引号中是否重要？或者我们可以定义它们有或没有？
@SethenMaleno 没有必要在引号中包含任何属性，这将在样式表中使用。我已经接受了一个解决方案，但感谢您的关注。
@MoDoFox 我真的是为自己着想。我从未见过在带有引号的对象中列出的属性。
@SethenMaleno 你知道吗......我不知道为什么他们中的一些人会返回“的”
@MoDoFox 你是说属性在''s中返回？

标签： javascript jquery html json

【解决方案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

【讨论】：

我试图做类似的事情，但这打破了color: "white" 为color: white。 +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;
}

【讨论】：

【解决方案3】：

只是用.replace扔掉我的版本

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

演示： http://jsbin.com/opiwuy/4

【讨论】：