脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JSON格式

基于javascript的JSON格式页面展示美化方法

 更新时间：2014年07月02日 16:42:16   投稿：whsnow  
本文介绍的方法基于javascript，css和myFunction结合可实现页面展示转换，下面有个示例，大家可以参考下
{"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结合可实现页面展示转换

您可能感兴趣的文章:

相关文章

  • 文章或博客自动生成章节目录索引(支持三级)的实现代码

    文章或博客自动生成章节目录索引(支持三级)的实现代码

    一个好的博文除了博文的质量要好以外，好的组织结构也能让读者阅读的更加舒服与方便，我看很多网站里面有一些园友的博文都是分章节的，并且在博文的前面都带有章节的目录索引，点击索引之后会跳转到相应的章节阅读
    2020-05-05
  • Javascript拖拽系列文章1之offsetParent属性

    Javascript拖拽系列文章1之offsetParent属性

    这个系列文章主要是讲述实现Javascript拖拽功能的基础知识，并将在最后给出一个完整的示例。适合对拖拽完全不懂的人阅读
    2008-09-09
  • js类型检查实现代码

    js类型检查实现代码

    检查对象类型的一种方式是参考所有JavaScript对象所共有的一个称为constructor的属性。该属性是对一个最初用来构造此对象的函数的引用。
    2010-10-10
  • 一文了解你不知道的JavaScript闭包篇

    一文了解你不知道的JavaScript闭包篇

    这篇文章主要为大家详细介绍了一些你不知道的JavaScript闭包相关知识，文中的示例代码讲解详细，对我们学习JavaScript有一定帮助，感兴趣的可以跟随小编一起学习一下
    2022-11-11
  • javascript 模式设计之工厂模式详细说明

    javascript 模式设计之工厂模式详细说明

    2010-05-05
  • javascript 得到变量类型的函数

    javascript 得到变量类型的函数

    在JavaScript中，有时需要准确知道一个变量的类型，显然typeof函数不能满足这个要求，这个函数在大多数情况下都返回object。
    2010-05-05
  • JavaScript编码小技巧分享

    JavaScript编码小技巧分享

    这篇文章适合任何一位基于JavaScript开发的开发者。我写这篇文章主要涉及JavaScript中一些简写的代码，帮助大家更好理解一些JavaScript的基础。希望这些代码能从不同的角度帮助你更好的理解JavaScript。
    2020-09-09
  • bootstrap-table formatter 使用vue组件的方法

    bootstrap-table formatter 使用vue组件的方法

    Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。这篇文章重点给大家介绍bootstrap-table formatter 使用vue组件的方法，感兴趣的朋友一起看看
    2019-05-05
  • js 页面元素的几个用法总结

    js 页面元素的几个用法总结

    本文是对js中页面元素的几个用法进行了详细的总结介绍，需要的朋友可以 过来参考下，希望对大家有所帮助
    2013-11-11
  • js螺旋动画效果的具体实例

    js螺旋动画效果的具体实例

    这篇文章主要介绍了js螺旋动画效果的具体实例，有需要的朋友可以参考一下
    2013-11-11

最新评论