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

学习YUI.Ext 第四天--对话框Dialog的使用

Mar 10 Javascript

用javascript实现的激活输入框后隐藏初始内容

Jun 29 Javascript

Jquery乱码的一次解决过程图解教程

Feb 20 Javascript

推荐40款强大的 jQuery 导航插件和教程(上篇)

Sep 14 Javascript

JS替换字符串中字符即替换全部而不是第一个

Jun 04 Javascript

快速解决js开发下拉框中blur与click冲突

Oct 10 Javascript

详解Bootstrap各式各样的按钮(推荐)

Dec 13 Javascript

JavaScript实现数值自动增加动画

Dec 28 Javascript

基于Vue实现可以拖拽的树形表格实例详解

Oct 18 Javascript

vue项目创建并引入饿了么elementUI组件的步骤

Apr 11 Javascript

vue组件中传值EventBus的使用及注意事项说明

Nov 16 Javascript

JavaScript 生成唯一ID的几种方式

Feb 19 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语法(1)

2006/10/09 PHP

mysql+php分页类（已测）

2008/03/31 PHP

php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串

2011/08/23 PHP

PHP对象转换为数组函数（递归方法）

2012/02/04 PHP

通过5个php实例细致说明传值与传引用的区别

2012/08/08 PHP

ini_set的用法介绍

2014/01/07 PHP

thinkPHP3.2.3结合Laypage实现的分页功能示例

2018/05/28 PHP

JavaScript RegExp方法获取地址栏参数(面向对象)

2009/03/10 Javascript

Prototype 学习工具函数学习($方法)

2009/07/12 Javascript

一个js的tab切换效果代码[代码分离]

2010/04/11 Javascript

图片上传判断及预览脚本的效果实例

2013/08/07 Javascript

js 判断上传文件大小及格式代码

2013/11/13 Javascript

javascript中call,apply,bind的用法对比分析

2015/02/12 Javascript

jquery实现兼容IE8的异步上传文件

2015/06/15 Javascript

JS原型对象的创建方法详解

2016/06/16 Javascript

Angular懒加载机制刷新后无法回退的快速解决方法

2016/08/30 Javascript

基于ES6 Array.of的用法(实例讲解)

2017/09/05 Javascript

Vuex 在Vue 组件中获得Vuex 状态state的方法

2018/08/27 Javascript

Python高级应用实例对比：高效计算大文件中的最长行的长度

2014/06/08 Python

Python2中文处理纪要的实现方法

2018/03/10 Python

Flask框架使用DBUtils模块连接数据库操作示例

2018/07/20 Python

如何安装多版本python python2和python3共存以及pip共存

2018/09/18 Python

python绘制随机网络图形示例

2019/11/21 Python

Python多个装饰器的调用顺序实例解析

2020/05/22 Python

使用Keras预训练模型ResNet50进行图像分类方式

2020/05/23 Python

英国鲜花速递：Serenata Flowers

2018/04/03 全球购物

哈萨克斯坦移动和数字技术在线商店：SatelOnline.kz

2020/09/04 全球购物

请解释一下webService？如何用.net实现webService

2014/06/09 面试题

授权委托书样本

2014/04/03 职场文书

走群众路线剖析材料

2014/10/09 职场文书

个人事迹材料范文

2014/12/29 职场文书

监理中标通知书

2015/04/16 职场文书

校园之声广播稿

2015/08/18 职场文书

电力培训学习心得体会

2016/01/11 职场文书

如何利用 CSS Overview 面板重构优化你的网站

2021/10/24 HTML / CSS

MySQL性能指标TPS+QPS+IOPS压测

2022/08/05 MySQL