基于JavaScript实现JSON格式页面美化展示
作者:闭包旅人时间:2026-10-28 12:47:18浏览:371
本文介绍利用JavaScript将JSON字符串转换为易读的页面展示格式。通过结合CSS样式与JavaScript函数,实现JSON数据的结构化输出,提升页面可读性。
{"name": "monkey","age": "24","height": 164.0}
JSON页面美化展示方法
若希望上述JSON字符串在网页中呈现为更易读的样式,可参考如下效果:
{
"name": "monkey",
"age": "24",
"height": 164.0cm
}
本文所述方法基于JavaScript语言,具体实现代码如下:
<html>
<head>/
//style中是css代码
<style type="text/css">
body
{
white-space: pre;
font-family: monospace;
}
</style>
//script中是javascript代码
<script>
window.error_id_msgs = <%= error_id_msgs | raw %>;
function myFunction() {
document.body.innerHTML = "";
document.body.appendChild(document.createTextNode(JSON.stringify(window.error_id_msgs, null, 4)));
}
</script>
</head>
<body onload="myFunction()"> //表示页面加载时调用myFunction()
</body>
</html>
其中,变量代表待转换的JSON对象。通过CSS样式与函数的配合,即可实现页面展示效果的转换。
作者最新文章
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
