编程 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的.animate()函数在IE6下的问题

Dec 03 Javascript

JavaScript中创建类/对象的几种方法总结

Nov 29 Javascript

JavaScript fontcolor方法入门实例（按照指定的颜色来显示字符串）

Oct 17 Javascript

PHPExcel中的一些常用方法汇总

Jan 23 Javascript

js实现带圆角的两级导航菜单效果代码

Aug 24 Javascript

JavaScript实现时钟滴答声效果

Jan 29 Javascript

vue父子组件的嵌套的示例代码

Sep 08 Javascript

微信小程序实现图片预览功能

Jan 31 Javascript

微信小程序使用wxParse解析html的实现示例

Aug 30 Javascript

微信小程序点击view动态添加样式过程解析

Jan 21 Javascript

javascript使用Blob对象实现的下载文件操作示例

Apr 18 Javascript

Vue全局使用less样式,组件使用全局样式文件中定义的变量操作

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

You might like

9个比较实用的php代码片段

2016/03/15 PHP

php实现的debug log日志操作类实例

2016/07/12 PHP

PHP面试常用算法(推荐)

2016/07/22 PHP

基于PHP实现微信小程序客服消息功能

2019/08/12 PHP

在JavaScript中遭遇级联表达式陷阱

2007/03/08 Javascript

JavaScript 基于原型的对象（创建、调用）

2009/10/16 Javascript

用JS写的一个TableView控件代码

2010/01/23 Javascript

jQuery中mouseover事件用法实例

2014/12/26 Javascript

jQuery基于ajax实现星星评论代码

2015/08/07 Javascript

JS读写CSS样式的方法汇总

2016/08/16 Javascript

Angular 应用技巧总结

2016/09/14 Javascript

关于List.ToArray()方法的效率测试

2016/09/30 Javascript

jquery UI Datepicker时间控件冲突问题解决

2016/12/16 Javascript

AngularJS框架的ng-app指令与自动加载实现方法分析

2017/01/04 Javascript

Angular ui.bootstrap.pagination分页

2017/01/20 Javascript

Bootstrap标签页（Tab）插件使用方法

2017/03/21 Javascript

socket.io学习教程之基本应用（二）

2017/04/29 Javascript

vue与TypeScript集成配置最简教程(推荐)

2017/10/17 Javascript

js数据类型检测总结

2018/08/05 Javascript

vue click.stop阻止点击事件继续传播的方法

2018/09/04 Javascript

Angular刷新当前页面的实现方法

2018/11/21 Javascript

VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

2018/11/30 Javascript

vue监听用户输入和点击功能

2019/09/27 Javascript

vue axios封装httpjs,接口公用配置拦截操作

2020/08/11 Javascript

[00:58]2016年国际邀请赛勇士令状宣传片

2016/06/01 DOTA

[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19

2018/08/21 DOTA

Python实现读取并保存文件的类

2017/05/11 Python

django框架中间件原理与用法详解

2019/12/10 Python

python实现与redis交互操作详解

2020/04/21 Python

AmazeUI 列表的实现示例

2020/08/17 HTML / CSS

天游软件面试

2013/11/23 面试题

化学学院毕业生自荐信范文

2013/12/17 职场文书

竞争上岗演讲稿

2014/01/05 职场文书

公司周年庆典邀请函

2014/01/12 职场文书

班主任工作经验交流会总结

2015/11/02 职场文书

实用求职信模板范文

2019/05/13 职场文书