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

Question

我在将 JSON 数据解析为 JavaScript 时遇到了困难。我希望能够仅使用 JSON 来自定义 CSS 功能。例如，我只想构建一个基本按钮。我创建了 CSS 样式并将其链接到 HTML。但是，我不知道这种方法可以确保 Javascript 读取 JSON 数据时，它会提供正确的答案。由于 CSS 涉及数值（等宽度：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>

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

Answer 2

这里还有一个解决方案https://jsfiddle.net/sopv9652/3/

var data = {
  "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"
  }
}

var tags = Object.keys(data);

$.each(tags, function(i){
	$('body').append($('<' + tags[i] + '>'));
  $(tags[i]).css(data[tags[i]]);
});

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