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

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Sep 20 Javascript

用Jquery重写windows.alert方法实现思路

Apr 03 Javascript

js 固定悬浮效果实现思路代码

Aug 02 Javascript

javascript将数字转换整数金额大写的方法

Jan 27 Javascript

Node.js中的process.nextTick使用实例

Jun 25 Javascript

浅谈JavaScript中的string拥有方法的原因

Aug 28 Javascript

jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

Jul 19 Javascript

Javascript中this绑定的3种方法与比较

Oct 13 Javascript

jquery uploadify如何取消已上传成功文件

Feb 08 Javascript

Vuex 快速入门(简单易懂)

Sep 20 Javascript

layui-select动态选中值的例子

Sep 23 Javascript

使用layer弹窗提交表单时判断表单是否输入为空的例子

Sep 26 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实现utf-8和GB2312编码相互转换函数代码

2013/02/07 PHP

php网页标题中文乱码的有效解决方法

2014/03/05 PHP

PHP判断文章里是否有图片的简单方法

2014/07/26 PHP

PHP串行化与反串行化实例分析

2016/12/27 PHP

php验证码生成器

2017/05/24 PHP

javascript陷阱一不小心你就中招了(字符运算)

2013/11/10 Javascript

javascript编写贪吃蛇游戏

2015/07/07 Javascript

jquery实现图片上传之前预览的方法

2015/07/11 Javascript

JavaScript function函数种类详解

2016/02/22 Javascript

原生js编写autoComplete插件

2016/04/13 Javascript

基于RequireJS和JQuery的模块化编程——常见问题全面解析

2016/04/14 Javascript

基于Bootstrap3表格插件和分页插件实例详解

2016/05/17 Javascript

vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错

2018/11/06 Javascript

JS中的算法与数据结构之列表(List)实例详解

2019/08/16 Javascript

[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角

2020/11/03 DOTA

Python代码调试的几种方法总结

2015/04/15 Python

django基础之数据库操作方法(详解)

2017/05/24 Python

Python机器学习k-近邻算法(K Nearest Neighbor)实例详解

2018/06/25 Python

在python中安装basemap的教程

2018/09/20 Python

在python中使用with打开多个文件的方法

2019/01/07 Python

pandas针对excel处理的实现

2021/01/15 Python

使用CSS3创建动态菜单效果

2015/07/10 HTML / CSS

全球地下的服装和态度：Slam Jam

2018/02/04 全球购物

世界领先的电子书网站：eBooks.com（在线购买小说、非小说和教科书）

2019/03/30 全球购物

电大自我鉴定范文

2013/10/01 职场文书

成人高等教育毕业生自我鉴定

2013/10/22 职场文书

幼教个人求职信范文

2013/12/02 职场文书

计算机专业学生求职信分享

2013/12/15 职场文书

大班上学期幼儿评语

2014/04/30 职场文书

公司股东出资证明书

2014/11/01 职场文书

教师师德表现自我评价

2015/03/05 职场文书

2016年社区创先争优活动总结

2016/04/05 职场文书

告诉你一个秘密：富人致富的五大优点

2019/07/11 职场文书

2019年圣诞节祝福语集锦

2019/12/25 职场文书

详解Python牛顿插值法

2021/05/11 Python

Python编程根据字典列表相同键的值进行合并

2021/10/05 Python