编程 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可访问其它域名的cookie的方法

Sep 18 Javascript

Jquery为单选框checkbox绑定单击click事件

Dec 18 Javascript

15个jquery常用方法、小技巧分享

Jan 13 Javascript

jquery滚动特效集锦

Jun 03 Javascript

基于jQuery实现的美观星级评论打分组件代码

Oct 30 Javascript

vue.js+boostrap项目实践(案例详解)

Sep 21 Javascript

JS中位置与大小的获取方法

Nov 22 Javascript

详解数组Array.sort()排序的方法

May 09 Javascript

JS实现加载和读取XML文件的方法详解

Apr 24 Javascript

对类Vue的MVVM前端库的实现代码

Sep 07 Javascript

教你如何编写Vue.js的单元测试的方法

Oct 17 Javascript

vue实现日历表格（element-ui）

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

PHP提取中文首字母

2008/04/09 PHP

php简单获取复选框值的方法

2016/05/11 PHP

[原创]php实现 data url的图片生成与保存

2016/12/04 PHP

区分JS中的undefined,null,"",0和false

2007/03/08 Javascript

IE不支持getElementsByClassName最终完美解决方案

2012/12/17 Javascript

jquery ajax中使用jsonp的限制解决方法

2013/11/22 Javascript

解决jquery插件冲突的问题

2014/01/23 Javascript

jQuery往返城市和日期查询实例讲解

2015/10/09 Javascript

jQuery+CSS实现滑动的标签分栏切换效果

2015/12/17 Javascript

JavaScript的Number对象的toString()方法

2015/12/18 Javascript

JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)

2016/04/05 Javascript

JS获取复选框的值,并传递到后台的实现方法

2016/05/30 Javascript

NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法

2016/07/26 NodeJs

js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换

2016/12/06 Javascript

利用javascript实现的三种图片放大镜效果实例（附源码）

2017/01/23 Javascript

微信小程序 action-sheet 反馈上拉菜单简单实例

2017/05/11 Javascript

AngularJS实用基础知识_入门必备篇(推荐)

2017/07/10 Javascript

JavaScript的setter与getter方法

2017/11/29 Javascript

Windows上node.js的多版本管理工具用法实例分析

2019/11/06 Javascript

解析Python中的eval()、exec()及其相关函数

2017/12/20 Python

详解django中使用定时任务的方法

2018/09/27 Python

Python制作动态字符图的实例

2019/01/27 Python

降低python版本的操作方法

2020/09/11 Python

修复iPhone的safari浏览器上submit按钮圆角bug

2012/12/24 HTML / CSS

详解通过focusout事件解决IOS键盘收起时界面不归位的问题

2019/07/18 HTML / CSS

银行实习生自我鉴定范文

2013/09/19 职场文书

中层干部竞争上岗演讲稿

2014/01/13 职场文书

个人自我评价和职业目标

2014/01/24 职场文书

会计学自我鉴定

2014/02/06 职场文书

2014个人年度工作总结范文

2014/12/24 职场文书

单独二胎证明

2015/06/24 职场文书

感谢信的技巧及范例

2019/05/15 职场文书

2019已经过半，你知道年中工作总结该怎么写吗？

2019/07/03 职场文书

用python实现监控视频人数统计

2021/05/21 Python

Android自定义scrollview实现回弹效果

2022/04/01 Java/Android

Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法

2023/01/09 数码科技