基于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 相关文章推荐
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
js 代码优化点滴记录
Feb 19 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 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连mysql和oracle数据库性能比较
2006/10/09 PHP
模拟flock实现文件锁定
2007/02/14 PHP
php抓取https的内容的代码
2010/04/06 PHP
php学习笔记之 函数声明
2011/06/09 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
33道php常见面试题及答案
2015/07/06 PHP
jquery 学习之一 对象访问
2010/11/23 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
python3 读写文件换行符的方法
2018/04/09 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
Python 忽略文件名编码的方法
2020/08/01 Python
python遍历路径破解表单的示例
2020/11/21 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
秋季运动会稿件
2014/01/30 职场文书
四年大学自我鉴定
2014/02/17 职场文书
团队口号大全
2014/06/06 职场文书
球队口号
2014/06/18 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
高三英语复习计划
2015/01/19 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
Python基本数据类型之字符串str
2021/07/21 Python