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

javascript 原型模式实现OOP的再研究

Apr 09 Javascript

JavaScript 字符串乘法

Aug 20 Javascript

JQuery 弹出框定位实现方法

Dec 02 Javascript

Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例

Dec 08 Javascript

动态添加删除表格行的js实现代码

Feb 28 Javascript

js使用DOM操作实现简单留言板的方法

Apr 10 Javascript

jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

Aug 24 Javascript

jQuery实现上传图片前预览效果功能

Aug 03 jQuery

尝试自己动手用react来写一个分页组件(小结)

Feb 09 Javascript

vue路由切换时取消之前的所有请求操作

Sep 01 Javascript

详解JavaScript中的执行上下文及调用堆栈

Apr 29 Javascript

vue router 动态路由清除方式

May 25 Vue.js

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 基础教程（一）

2006/10/09 PHP

PHP中date()日期函数有关参数整理

2011/07/19 PHP

PHP模板引擎Smarty内建函数foreach,foreachelse用法分析

2016/04/11 PHP

PHP不使用内置函数实现字符串转整型的方法示例

2017/07/03 PHP

本地对象Array的原型扩展实现代码

2010/12/04 Javascript

jQuery中filter()方法用法实例

2015/01/06 Javascript

Node.js node-schedule定时任务隔多少分钟执行一次的方法

2015/02/10 Javascript

Underscore.js常用方法总结

2015/02/28 Javascript

JS实现页面跳转参数不丢失的方法

2016/11/28 Javascript

javascript中setAttribute兼容性用法分析

2016/12/12 Javascript

微信小程序图片上传实例详解

2017/05/05 Javascript

详解vue-cli快速构建项目以及引入bootstrap、jq

2017/05/26 Javascript

JS实现点击按钮可实现编辑功能

2018/07/03 Javascript

vue 项目接口管理的实现

2019/01/17 Javascript

Angular中innerHTML标签的样式不起作用的原因解析

2019/06/18 Javascript

vue+ESLint 配置保存自动格式化代码

2020/03/17 Javascript

如何在vue中使用jointjs过程解析

2020/05/29 Javascript

[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫

2020/07/07 DOTA

21行Python代码实现拼写检查器

2016/01/25 Python

Python使用try except处理程序异常的三种常用方法分析

2018/09/05 Python

利用python GDAL库读写geotiff格式的遥感影像方法

2018/11/29 Python

python爬虫 urllib模块发起post请求过程解析

2019/08/20 Python

Python加速程序运行的方法

2020/07/29 Python

Python爬取微信小程序通用方法代码实例详解

2020/09/29 Python

详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式

2021/01/24 Python

经济学人订阅：The Economist

2018/07/19 全球购物

Antonioli美国在线商店：时尚前卫奢华

2019/07/29 全球购物

Java多态性的定义以及类型

2014/09/16 面试题

资产评估专业学生的自我鉴定

2013/11/14 职场文书

酒店司机岗位职责

2013/12/14 职场文书

个人评价范文分享

2014/01/11 职场文书

学雷锋活动总结范文

2014/04/25 职场文书

英语教师求职信

2014/06/16 职场文书

学校开学标语

2014/10/06 职场文书

申报优秀教师材料

2014/12/16 职场文书

辞职信怎么写？

2019/05/21 职场文书