Javascript 自定义CSS的JSON数据（来自外部JSON文件的JSON数据）*更新问题（如何从JSON数据生成数组）

我很难将JSON数据解析为JavaScript。我希望能够通过使用JSON定制CSS特性。例如，我只想构建一个基本按钮。我创建了CSS样式并将其链接到HTML中。然而，我不知道这样一种方法来确保当Javascript读取JSON数据时，它会提供正确的答案。由于CSS涉及数值等宽度：50%，这使我更难自定义

我想更改按钮的大小、背景色、填充以及按钮中的文本

有人能帮我吗。非常感谢。 我使用这段代码将Json解析为html

var info=JSON.parse(request.responseText);

---JSON文件---

  {
      "button": {
        "width" : "100%",
        "backgroundColor": "#4CAF50",
        "border": "none",
        "color": "red",
        "padding": "15px 32px",
        "textAlign": "center",
        "textDecoration": "none",
        "display": "inline-block",
        "fontSize": "16px",
        "margin": "4px 2px",
        "cursor": "pointer"
      }
    }

JS file
window.onload = loadJSON;
function loadJSON()
{
 var request;
   if (window.XMLHttpRequest){
      request=new XMLHttpRequest();
   } else {
      request =new ActiveXObject("Microsoft.XMLHTTP");
      }

     request.onreadystatechange = function()
        {
         if ((request.status ===200) &&
            (request.readyState ===4))
            {

             var info=JSON.parse(request.responseText);

             if(info!= null)
                {
                  Object.keys(info).forEach(function(k) {
                    $('<' + k + ' />', info[k].attr).css(info[k].css).appendTo('#container');
                  });

                }
                else {alert("error")};
            }
        }

---

这是最新的代码。我想知道，如果我想定制多个按钮，是否可能？代码应该是什么，因为我无法解决它。

对象的结构与jQuery在构建新元素时所期望的CSS属性非常匹配。因此，您可以将该对象应用于用于创建元素的jQuery对象

要指定元素的类型，可以使用object.keys检索对象的属性，然后在其上循环

如果要设置元素的文本，则需要修改数据结构以分别提供CSS属性和HTML属性，以便可以通过相关方法应用它们，如下所示：

var obj={ 按钮：{ css:{ 宽度：100%， 背景颜色：4CAF50， 边界：无， 颜色：红色， 填充：15px 32px， text对齐：居中， 文本装饰：无， 显示：内联块， 字体大小：16px， 保证金：4px2px， 光标：指针 }, 属性：{ 文本：“Foo” } }, a:{ css:{}， 属性：{ href:'http://stackoverflow.com', 文本：“访问StackOverflow.com” } } } Object.keysobj.forEachfunctionk{ $，obj[k].attr.cssobj[k].css.appendTo'container'； };

---

这是另一个解决方案

风险值数据={ 按钮：{ 宽度：100%， 背景颜色：4CAF50， 边界：无， 颜色：红色， 填充：15px 32px， text对齐：居中， 文本装饰：无， 显示：内联块， 字体大小：16px， 保证金：4px2px， 光标：指针 } } var tags=Object.keysdata； $.eachtags，functioni{ $'body'。追加$； $tags[i].cssdata[tags[i]]； };

---

对于解析问题，剩下的问题。。。我不知道你想要什么。你能详细说明这个问题吗？你想从对象中读取JSON并让javascript相应地更改按钮的样式属性吗？是这样吗？恐怕这个问题真的不是很清楚。您提到一些现有的CSS，然后一些JSON包含一些类似CSS的信息，不清楚它们之间的联系是什么，也不清楚您认为50%之类的问题是什么。还有，你试过什么吗？您知道如何使用Javascript设置元素的样式吗？您知道如何从JSON/JavaScript对象读取属性吗？现在还不清楚你想要什么，或者你在做什么。是的，我想从对象中读取JSON，并让javascript相应地更改按钮的样式属性。我知道如何将JSON数据解析为JavaScript。只要使用CSS、HTML和JavaScript，我就可以自定义按钮图标。我想尝试一些新的东西，从JSON文件中提取数据，并允许程序定制button的现有功能。但是，我只能更改按钮内的文本，例如“单击我”，但无法更改按钮的颜色、大小等。请显示您目前获得的代码好吗？请编辑问题以包含它。已更新！请看一看，你知道我如何定制多个按钮吗？我应该在JS代码中包含什么？仅供参考OP希望从JSON构建元素，而不是修改现有元素。另外，不需要第二个循环。谢谢您的帮助！这很有帮助。但是，我正在将外部JSON文件解析为Javascript，方法是否相同？不完全相同-您只需要删除提供给jQuery对象的第二个参数，并将obj[k].css更改为obj[k]。另外，如果您无法控制返回的JSON，那么设置您创建的元素的文本将困难得多。谢谢您的帮助。但是，你介意向我解释一下这个代码的含义吗？我其实不明白你用的“k”这个词。另外，你在编码中没有使用“按钮”这个词。我很好奇，尽管没有使用“button”语法，但代码如何生成“button”。Object.keysobj.forEachfunctionk{$，obj[k].attr.cssobj[k].css.appendTo'container'；}；k变量保存对正在迭代的对象的当前键的引用。这意味着在第一次迭代中，它将保持value按钮。因此

---

jQuery对象用于创建新元素：$。然后根据对象的键k将相关属性和CSS添加到新元素中。在第二次迭代中也会发生同样的情况，但是k现在引用了对象的a属性。我建议您将此问题恢复到以前的状态，并开始一个关于从远程源检索数据的新问题。