编程 Javascript

基于javascript的JSON格式页面展示美化方法

Posted in Javascript onJuly 02, 2014

{"name": "monkey","age": "24","height": 164.0}

如果想让以上json字符串在页面上展示的比较易读，即变成下面的style:

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

其中window.error_id_msgs是所要转换的json对象，css和myFunction结合可实现页面展示转换

基于javascript的JSON格式页面展示美化方法

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 1.0.2

Oct 11 Javascript

动态改变div的z-index属性的简单实例

Aug 08 Javascript

通过js获取div的background-image属性

Oct 15 Javascript

JavaScript数值转换的三种方式总结

Jul 31 Javascript

angularjs客户端实现压缩图片文件并上传实例

Jul 06 Javascript

VUEJS实战之构建基础并渲染出列表（1）

Jun 13 Javascript

第一篇初识bootstrap

Jun 21 Javascript

详解Webstorm 新建.vue文件支持高亮vue语法和es6语法

Oct 26 Javascript

浅谈 Webpack 如何处理图片(开发、打包、优化)

May 15 Javascript

vue实现匀速轮播效果

Jun 29 Javascript

微信小程序canvas动态时钟

Oct 22 Javascript

vue 获取到数据但却渲染不到页面上的解决方法

Nov 19 Vue.js

jQuery窗口、文档、网页各种高度的精确理解

Jul 02 #Javascript

JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果

Jul 02 #Javascript

jquery序列化表单以及回调函数的使用示例

Jul 02 #Javascript

IE8下Jquery获取select选中的值post到后台报错问题

Jul 02 #Javascript

js面向对象编程之如何实现方法重载

Jul 02 #Javascript

jquery.validate.js插件使用经验记录

Jul 02 #Javascript

escape编码与unescape解码汉字出现乱码的解决方法

Jul 02 #Javascript

You might like

php中拷贝构造函数、赋值运算符重载

2012/07/25 PHP

AJAX的使用方法详解

2017/04/29 PHP

JavaScript 计算图片加载数量的代码

2011/01/01 Javascript

jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法

2011/09/27 Javascript

javascript小组件原生table排序表格脚本(兼容ie firefox opera chrome)

2012/07/25 Javascript

一个简单的网站访问JS计数器刷新1次加1次访问

2012/09/20 Javascript

利用js实现遮罩以及弹出可移动登录窗口

2013/07/08 Javascript

javasctipt如何显示几分钟前、几天前等

2014/04/30 Javascript

jquery模拟LCD 时钟的html文件源代码

2014/06/16 Javascript

JavaScript驾驭网页-CSS与DOM

2016/03/24 Javascript

webpack多入口文件页面打包配置详解

2018/01/09 Javascript

ES6下子组件调用父组件的方法(推荐)

2018/02/23 Javascript

微信小程序实现上传图片功能

2018/05/28 Javascript

js取小数点后两位四种方法

2019/01/18 Javascript

详解Vue项目引入CreateJS的方法（亲测可用）

2019/05/30 Javascript

微信小程序服务器日期格式化问题

2020/01/07 Javascript

[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15

2019/08/17 DOTA

[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28

2020/12/02 DOTA

Python实现身份证号码解析

2015/09/01 Python

Python Requests安装与简单运用

2016/04/07 Python

浅谈python中copy和deepcopy中的区别

2017/10/23 Python

Python自然语言处理 NLTK 库用法入门教程【经典】

2018/06/26 Python

python绘制多个曲线的折线图

2020/03/23 Python

Python代码实现删除一个list里面重复元素的方法

2019/04/02 Python

python下载库的步骤方法

2019/10/12 Python

Python上下文管理器用法及实例解析

2019/11/11 Python

python使用pip安装SciPy、SymPy、matplotlib教程

2019/11/20 Python

Python HTMLTestRunner可视化报告实现过程解析

2020/04/10 Python

HTML5触摸事件(touchstart、touchmove和touchend)的实现

2020/05/08 HTML / CSS

维多利亚的秘密阿联酋官网：Victoria’s Secret阿联酋

2019/12/07 全球购物

大四学生思想汇报

2014/01/13 职场文书

一年级家长会邀请函

2014/01/25 职场文书

2014最新党员批评与自我批评材料

2014/09/24 职场文书

2014年行政工作总结

2014/11/19 职场文书

学生不参加考试检讨书

2015/02/19 职场文书

优秀教师主要事迹材料

2015/11/04 职场文书