0

这是我的 JSON 数据。我想将每个项目放在表单的特定位置。这可能吗？

var objs = [{
  "Object1": {
    "ID": 1,
    "type": "input",
    "color": "red",
    "Text": "DARKDRAGON",
    "width": "100px",
    "height": "100px",
    "top": "50%",
    "left": "25%",
    "Font": {
      "fontName": "tahoma",
      "font": "150px"
    }
  },
  "Object2": {
    "ID": 2,
    "type": "textarea",
    "color": "cyan",
    "Text": "SPEEDYTIGER",
    "width": "100px",
    "height": "100px",
    "top": "50%",
    "left": "25%",
    "Font": {
      "fontName": "tahoma",
      "font": "150px"
    }
  },
  "Object3": {
    "ID": 3,
    "type": "input",
    "color": "blue",
    "Text": "AMyesteriousAdults",
    "width": "100px",
    "height": "100px",
    "top": "50%",
    "left": "25%",
    "Font": {
      "fontName": "tahoma",
      "font": "150px"
    }
  },
  "Object4": {
    "ID": 4,
    "type": "button",
    "color": "darkorange",
    "Text": "AMyesteriousDarkSpeed",
    "width": "100px",
    "height": "100px",
    "top": "50%",
    "left": "25%",
    "Font": {
      "fontName": "tahoma",
      "font": "150px"
    }
  }
}]

objs.forEach(function(objs) {
  for (var k in objs) {
    if (objs[k] instanceof Object) {
      console.log(objs[k].type);
      var elmn = document.createElement(objs[k].type);
      elmn.textContent = objs[k].Text;
      elmn.style.color = objs[k].color;
      elmn.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = objs[k].top;
      document.getElementById('ColorArea').appendChild(elmn);
    } else {
      console.log('Else');
    };
  }
});
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="ColorArea">
  </div>
  <script src="Main.js"></script>
</body>

</html>

我想要一个在左边，一个在底部，或者全部在彼此下方，这样看起来井井有条。

4

3 回答 3

1

您必须根据您的数据对象修改样式属性。确保您的容器有relative位置并且里面的物品是absolute.

如果您运行该片段，请确保单击Full page链接，否则它会在预览中看起来被挤压。

Object.assign(elmn.style, {
  position   : 'absolute',
  color      : formItem.color,
  width      : formItem.width,
  height     : formItem.height,
  top        : formItem.top,
  left       : formItem.left,
  fontFamily : formItem.Font.fontName,
  fontSize   : formItem.Font.font,
});


var objs = [{
  "Object1": {
    "ID": 1,
    "type": "input",
    "color": "red",
    "Text": "DARKDRAGON",
    "width": "100px",
    "height": "100px",
    "top": "25%",
    "left": "25%",
    "Font": {
      "fontName": "tahoma",
      "font": "150px"
    }
  },
  "Object2": {
    "ID": 2,
    "type": "textarea",
    "color": "cyan",
    "Text": "SPEEDYTIGER",
    "width": "100px",
    "height": "100px",
    "top": "50%",
    "left": "50%",
    "Font": {
      "fontName": "tahoma",
      "font": "150px"
    }
  },
  "Object3": {
    "ID": 3,
    "type": "input",
    "color": "blue",
    "Text": "AMyesteriousAdults",
    "width": "100px",
    "height": "100px",
    "top": "50%",
    "left": "25%",
    "Font": {
      "fontName": "tahoma",
      "font": "150px"
    }
  },
  "Object4": {
    "ID": 4,
    "type": "button",
    "color": "darkorange",
    "Text": "AMyesteriousDarkSpeed",
    "width": "100px",
    "height": "100px",
    "top": "25%",
    "left": "50%",
    "Font": {
      "fontName": "tahoma",
      "font": "150px"
    }
  }
}]

objs.forEach(function(objs) {
  for (var k in objs) {
    if (objs[k] instanceof Object) {
      const formItem = objs[k];
      var elmn = document.createElement(objs[k].type);
      elmn.textContent = formItem.Text;
      
      Object.assign(elmn.style, {
        position: 'absolute',
        color: formItem.color,
        width: formItem.width,
        height: formItem.height,
        top: formItem.top,
        left: formItem.left,
        fontFamily: formItem.Font.fontName,
        fontSize: formItem.Font.font,
      });
      
      document.getElementById('ColorArea').appendChild(elmn);
    } else {
      console.log('Else');
    };
  }
});
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#ColorArea {
  position: relative;
  background: #EEE;
  width: 100%;
  height: 100%;
}
<div id="ColorArea"></div>

于 2020-08-13T15:11:07.013 回答
0

你可以试试这个：元素将显示在另一个之下。

<html>
  <head>
    <style>
      #ColorArea {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
    </style>
  </head>

  <body>
    <div id="ColorArea">
    </div>
    <script src="Main.js"></script>
  </body>

</html>



var objs = [{
    "Object1": {
        "ID": 1,
        "type": "input",
        "color": "red",
        "Text": "DARKDRAGON",
        "width": "100px",
        "height": "100px",
        "top": "50%",
        "left": "25%",
        "Font": {
            "fontName": "tahoma",
            "font": "150px"
        }
    },
    "Object2": {
        "ID": 2,
        "type": "textarea",
        "color": "cyan",
        "Text": "SPEEDYTIGER",
        "width": "100px",
        "height": "100px",
        "top": "50%",
        "left": "25%",
        "Font": {
            "fontName": "tahoma",
            "font": "150px"
        }
    },
    "Object3": {
        "ID": 3,
        "type": "input",
        "color": "blue",
        "Text": "AMyesteriousAdults",
        "width": "100px",
        "height": "100px",
        "top": "50%",
        "left": "25%",
        "Font": {
            "fontName": "tahoma",
            "font": "150px"
        }
    },
    "Object4": {
        "ID": 4,
        "type": "button",
        "color": "darkorange",
        "Text": "AMyesteriousDarkSpeed",
        "width": "100px",
        "height": "100px",
        "top": "50%",
        "left": "25%",
        "Font": {
            "fontName": "tahoma",
            "font": "150px"
        }
    }
}]

objs.forEach(function (objs) {
    for (var k in objs) {
        if (objs[k] instanceof Object) {
            var elmn = document.createElement(objs[k].type);
            elmn.textContent = objs[k].Text;
            elmn.style.color = objs[k].color;
            elmn.style.margin = '10px';
            elmn.style['word-break'] = 'break-word';
            elmn.style.width = objs[k].width;
            elmn.style.height = objs[k].height;
            document.getElementById('ColorArea').appendChild(elmn);
        } else {
            console.log('Else');
        };
    }
});
  • 如果要设置输入元素的值，可以添加额外的检查，例如
if(objs[k].type == 'input') {
   elmn.value = objs[k].Text;
} else {
   elmn.textContent = objs[k].Text;
}
于 2020-08-13T15:47:02.960 回答
0

不确定这是否是您需要的

var objs = {
    "Object1": {
        "ID": 1,
        "type": "input",
        "color": "red",
        "Text": "DARKDRAGON",
        "width": "100px",
        "height": "100px",
        "top": "50%",
        "left": "25%",
        "Font": {
            "fontName": "tahoma",
            "font": "150px"
        }
    },
    "Object2": {
        "ID": 2,
        "type": "textarea",
        "color": "cyan",
        "Text": "SPEEDYTIGER",
        "width": "100px",
        "height": "100px",
        "top": "50%",
        "left": "25%",
        "Font": {
            "fontName": "tahoma",
            "font": "150px"
        }
    },
   "Object3": {
        "ID": 3,
        "type": "input",
        "color": "blue",
        "Text": "AMyesteriousAdults",
        "width": "100px",
        "height": "100px",
        "top": "50%",
        "left": "25%",
        "Font": {
            "fontName": "tahoma",
            "font": "150px"
        }
    },
    "Object4": {
        "ID": 4,
        "type": "button",
        "color": "darkorange",
        "Text": "AMyesteriousDarkSpeed",
        "width": "100px",
        "height": "100px",
        "top": "50%",
        "left": "25%",
        "Font": {
            "fontName": "tahoma",
            "font": "150px"
        }
    }
};

var base_node = document.getElementById("ColorArea");
var new_line = document.createElement("br");

Object.values(objs).forEach(function(item) {

  var new_element = document.createElement(item.type);
  new_element.style.display = "block";
  new_element.style.color = item.color;
  new_element.style.width = item.width;
  new_element.style.height = item.height;
  new_element.style.top = item.top;
    new_element.style.left = item.left;
  new_element.value = item.Text;

  base_node.appendChild(new_element);
  base_node.appendChild(new_line);
  
})
于 2020-08-13T15:24:46.327 回答