Javascript 在特定位置写入JSON数据

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

var objs=[{
“对象1”：{
“ID”：1，
“类型”：“输入”，
“颜色”：“红色”，
“文本”：“DARKDRAGON”，
“宽度”：“100px”，
“高度”：“100px”，
“顶部”：“50%”，
“左”：“25%”，
“字体”：{
“fontName”：“tahoma”，
“字体”：“150px”
}
},
“目标2”：{
“ID”：2，
“类型”：“文本区域”，
“颜色”：“青色”，
“文本”：“SPEEDYTIGER”，
“宽度”：“100px”，
“高度”：“100px”，
“顶部”：“50%”，
“左”：“25%”，
“字体”：{
“fontName”：“tahoma”，
“字体”：“150px”
}
},
“反对意见3”：{
“ID”：3，
“类型”：“输入”，
“颜色”：“蓝色”，
“文本”：“成年人”，
“宽度”：“100px”，
“高度”：“100px”，
“顶部”：“50%”，
“左”：“25%”，
“字体”：{
“fontName”：“tahoma”，
“字体”：“150px”
}
},
“反对意见4”：{
“ID”：4，
“类型”：“按钮”，
“颜色”：“darkorange”，
“文本”：“黑暗的速度”，
“宽度”：“100px”，
“高度”：“100px”，
“顶部”：“50%”，
“左”：“25%”，
“字体”：{
“fontName”：“tahoma”，
“字体”：“150px”
}
}
}]
forEach（函数（objs）{
for（objs中的var k）{
if（对象的objs[k]实例）{
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\u POSITION\u IMPLEMENTATION\u SPECIFIC=objs[k]。顶部；
document.getElementById（'ColorArea'）.appendChild（elmn）；
}否则{
console.log（'Else'）；
};
}
});
您必须根据数据对象修改样式属性。确保您的容器具有
相对位置
，且容器内的项目为
绝对位置

如果运行代码段，请确保单击完整页面链接，否则它在预览中看起来会被压扁

Object.assign（elmn.style{
位置：'绝对'，
颜色：formItem.color，
宽度：formItem.width，
高度：formItem.height，
top:formItem.top，
左：formItem.left，
fontFamily:formItem.Font.fontName，
fontSize:formItem.Font.Font，
});


var objs=[{
“对象1”：{
“ID”：1，
“类型”：“输入”，
“颜色”：“红色”，
“文本”：“DARKDRAGON”，
“宽度”：“100px”，
“高度”：“100px”，
“顶部”：“25%”，
“左”：“25%”，
“字体”：{
“fontName”：“tahoma”，
“字体”：“150px”
}
},
“目标2”：{
“ID”：2，
“类型”：“文本区域”，
“颜色”：“青色”，
“文本”：“SPEEDYTIGER”，
“宽度”：“100px”，
“高度”：“100px”，
“顶部”：“50%”，
“左”：“50%”，
“字体”：{
“fontName”：“tahoma”，
“字体”：“150px”
}
},
“反对意见3”：{
“ID”：3，
“类型”：“输入”，
“颜色”：“蓝色”，
“文本”：“成年人”，
“宽度”：“100px”，
“高度”：“100px”，
“顶部”：“50%”，
“左”：“25%”，
“字体”：{
“fontName”：“tahoma”，
“字体”：“150px”
}
},
“反对意见4”：{
“ID”：4，
“类型”：“按钮”，
“颜色”：“darkorange”，
“文本”：“黑暗的速度”，
“宽度”：“100px”，
“高度”：“100px”，
“顶部”：“25%”，
“左”：“50%”，
“字体”：{
“fontName”：“tahoma”，
“字体”：“150px”
}
}
}]
forEach（函数（objs）{
for（objs中的var k）{
if（对象的objs[k]实例）{
常量formItem=objs[k]；
var elmn=document.createElement（objs[k].type）；
elmn.textContent=formItem.Text；
Object.assign（elmn.style{
位置：'绝对'，
颜色：formItem.color，
宽度：formItem.width，
高度：formItem.height，
top:formItem.top，
左：formItem.left，
fontFamily:formItem.Font.fontName，
fontSize:formItem.Font.Font，
});
document.getElementById（'ColorArea'）.appendChild（elmn）；
}否则{
console.log（'Else'）；
};
}
});
html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
#色域{
位置：相对位置；
背景：#EEE；
宽度：100%；
身高：100%；
}
不确定这是否是您需要的

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);
  
})


你能试试这个吗：元素将一个接一个地显示出来

<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>



如果要设置输入元素的值，可以添加额外的检查，如

请使其可读请详细说明您正在尝试做什么。我正在尝试组织数据，如将它们放在某个位置，如1在另一个位置。这是在我的个人资料中（如何读取JavaScript中的外部本地JSON文件）我不想要它在htmli中我想要它在js中property@speedy它是用JavaScript编写的。。。我不知道你为什么说不是check@speedy这不是一个代码编写服务。我刚刚向您展示了如何通过JavaScript应用样式。我不想要html我想要一个js属性我想要顶部和左侧当我改变它们时它们工作和改变位置就像发生的事情我想要css但是我想要js属性我想要顶部和左侧当我改变它们时它们工作和改变位置像发生的事情我想要css但是我想要它在JS Property中，请查看此处

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;
}