编程 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 相关文章推荐

js实现双向链表互联网机顶盒实战应用实现

Oct 28 Javascript

js中实现多态采用和继承类似的方法

Aug 22 Javascript

jQuery中:hidden选择器用法实例

Dec 30 Javascript

node.js 使用ejs模板引擎时后缀换成.html

Apr 22 Javascript

详解js中构造流程图的核心技术JsPlumb

Dec 08 Javascript

javascript单页面手势滑屏切换原理详解

Mar 21 Javascript

vuejs指令详解

Feb 07 Javascript

jQuery实现的监听导航滚动置顶状态功能示例

Jul 23 jQuery

最适应的vue.js的form提交涉及多种插件【推荐】

Aug 27 Javascript

微信小程序缓存过期时间的使用详情

May 12 Javascript

微信小程序实现图片上传

May 23 Javascript

TS 类型兼容教程示例详解

Sep 23 Javascript

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

克隆(1) 小喇叭(1) 增删查改(1) #{}(1) 外键(1) 脏读(2) SQL注入(2) S-2000(1) 代理(2) IC-R9500(1)

You might like

PHP编程之高级技巧——利用Mysql函数

2006/10/09 PHP

PHP中使用CURL伪造来路抓取页面或文件

2011/05/04 PHP

ThinkPHP调用百度翻译类实现在线翻译

2014/06/26 PHP

PHP函数in_array()使用详解

2014/08/20 PHP

PHP类的声明与实例化及构造方法与析构方法详解

2016/01/26 PHP

PHP 获取客户端 IP 地址的方法实例代码

2018/11/11 PHP

PHP的mysqli_ssl_set()函数讲解

2019/01/23 PHP

PHP CURL使用详解

2019/03/21 PHP

JavaScript作用域链示例分享

2014/05/27 Javascript

JavaScript中的Repaint和Reflow用法详解

2015/07/27 Javascript

addeventlistener监听scroll跟touch(实例讲解)

2017/08/04 Javascript

JSON对象转化为字符串详解

2017/08/11 Javascript

Python验证码识别的方法

2015/07/10 Python

python实现读取并显示图片的两种方法

2017/01/13 Python

Python基于tkinter模块实现的改名小工具示例

2017/07/27 Python

Python的CGIHTTPServer交互实现详解

2018/02/08 Python

Django使用Mysql数据库已经存在的数据表方法

2018/05/27 Python

python使用pygame框架实现推箱子游戏

2018/11/20 Python

python最小生成树kruskal与prim算法详解

2019/01/17 Python

如何运行.ipynb文件的图文讲解

2019/06/27 Python

django数据库自动重连的方法实例

2019/07/21 Python

Python基于yield遍历多个可迭代对象

2020/03/12 Python

Python集成开发工具Pycharm的安装和使用详解

2020/03/18 Python

如何在python中执行另一个py文件

2020/04/30 Python

Django+RestFramework API接口及接口文档并返回json数据操作

2020/07/12 Python

Django Admin后台模型列表页面如何添加自定义操作按钮

2020/11/11 Python

一款基于css3和jquery实现的动画显示弹出层按钮教程

2015/01/04 HTML / CSS

HTML5新增的8类INPUT输入类型介绍

2015/07/06 HTML / CSS

购买澳大利亚最好的服装和内衣在线：BONDS

2016/10/14 全球购物

学生就业推荐信

2013/11/13 职场文书

贸易跟单员英文求职信

2014/04/19 职场文书

廉洁家庭事迹材料

2014/05/15 职场文书

艺术学院毕业生自荐信

2014/07/05 职场文书

质监局领导班子对照检查材料思想汇报

2014/09/27 职场文书

Vue CLI中模式与环境变量的深入详解

2021/05/30 Vue.js

Spark SQL 2.4.8 操作 Dataframe的两种方式

2021/10/16 SQL Server