基于javascript的JSON格式頁面展示美化方法
更新時間:2014年07月02日 16:42:16 投稿:whsnow
本文介紹的方法基于javascript,css和myFunction結合可實現(xiàn)頁面展示轉換,下面有個示例,大家可以參考下
{"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結合可實現(xiàn)頁面展示轉換
相關文章
詳解JavaScript數(shù)組和字符串中去除重復值的方法
這篇文章主要介紹了詳解JavaScript數(shù)組和字符串中去除重復值的方法,及利用各種限制條件對數(shù)組和字符串進行過濾,需要的朋友可以參考下2016-03-03詳解JavaScript的Symbol類型、隱藏屬性、全局注冊表
這篇文章主要介紹了JavaScript的Symbol類型、隱藏屬性、全局注冊表,本文主要對其使用方法和使用場景做個簡單的介紹,需要的朋友可以參考下2022-05-05javascript實現(xiàn)鼠標拖動改變層大小的方法
這篇文章主要介紹了javascript實現(xiàn)鼠標拖動改變層大小的方法,涉及javascript操作鼠標事件及樣式的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04layui 實現(xiàn)二級彈窗彈出之后 關閉一級彈窗的方法
今天小編就為大家分享一篇layui 實現(xiàn)二級彈窗彈出之后 關閉一級彈窗的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09