javascript - 自定义 CSS 的 JSON 数据(来自外部 JSON 文件的 JSON 数据)*更新问题(如何从 JSON 数据创建数组)

Question

我在将 JSON 数据解析为 JavaScript 时遇到困难。我希望能够仅使用 JSON 来自定义 CSS 功能。例如，我只想构建一个基本按钮。我创建了 CSS 样式并将其链接到 HTML 中。但是，我不知道这样的方式来确保当 Javascript 读取 JSON 数据时，它会提供正确的答案。由于 CSS 涉及数值(等 width:50%)，这让我更难定制。

我想更改按钮的大小、background-color、padding 以及按钮中的文本。

谁能帮我解决这个问题。谢谢我用这段代码将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")};
            }
        }

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

Answer 1

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

要指定元素的类型，您可以使用 Object.keys 检索对象的属性，然后循环遍历它们。

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

var obj = {
  button: {
    css: {
      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"
    },
    attr: {
      text: 'Foo'
    } 
  },
  a: {
    css: {},
    attr: {
      href: 'http://stackoverflow.com',
      text: 'Visit StackOverflow.com'
    }
  }
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

需要注意的是，对象中属性的顺序是无法保证的，因此如果您需要依赖顺序，我建议您将数据结构从对象更改为对象数组。