快捷導(dǎo)航

基于javascript的JSON格式頁(yè)面展示美化方法

更新時(shí)間：2014年07月02日 16:42:16 投稿：whsnow

本文介紹的方法基于javascript，css和myFunction結(jié)合可實(shí)現(xiàn)頁(yè)面展示轉(zhuǎn)換，下面有個(gè)示例，大家可以參考下

{"name": "monkey","age": "24","height": 164.0}

如果想讓以上json字符串在頁(yè)面上展示的比較易讀，即變成下面的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()">　//表示頁(yè)面加載時(shí)調(diào)用myFunction() 
</body> 
</html>

其中window.error_id_msgs是所要轉(zhuǎn)換的json對(duì)象，css和myFunction結(jié)合可實(shí)現(xiàn)頁(yè)面展示轉(zhuǎn)換

您可能感興趣的文章:

相關(guān)文章

瀏覽器無(wú)法運(yùn)行JAVA腳本的解決方法
2008-01-01
Lottie動(dòng)畫(huà)前端開(kāi)發(fā)使用技巧
這篇文章主要為大家介紹了Lottie動(dòng)畫(huà)前端開(kāi)發(fā)使用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
詳解JavaScript 中的 replace 方法
這篇文章主要介紹了詳解JavaScript 中的 replace 方法的相關(guān)資料,需要的朋友可以參考下
2016-01-01
JS數(shù)組push、unshift、pop、shift方法的實(shí)現(xiàn)與使用方法示例
這篇文章主要介紹了JS數(shù)組push、unshift、pop、shift方法,結(jié)合實(shí)例形式分析了JS數(shù)組push、unshift、pop、shift方法針對(duì)數(shù)組添加、刪除等相關(guān)操作技巧,需要的朋友可以參考下
2020-04-04
jQuery檢測(cè)輸入的字符串包含的中英文的數(shù)量
這篇文章主要介紹了jQuery檢測(cè)輸入的字符串包含的中英文的數(shù)量的實(shí)現(xiàn)方法，非常的實(shí)用，這里推薦給小伙伴，有需要的朋友可以參考下。
2015-04-04
JavaScript容錯(cuò)例外處理
程序開(kāi)發(fā)中，編程人員經(jīng)常要面對(duì)的是如何編寫(xiě)代碼來(lái)響應(yīng)錯(cuò)誤事件的發(fā)生，即例外處理（exception handlers）。
2008-06-06
我的javascript 函數(shù)鏈之演變
我的javascript 函數(shù)鏈之演變,需要的朋友可以參考下。
2011-04-04
JS中使用textPath實(shí)現(xiàn)線條上的文字
最近項(xiàng)目經(jīng)理交給我一下新項(xiàng)目，要實(shí)現(xiàn)關(guān)系圖，需要在線條上繪制文字。下面小編把使用textPath實(shí)現(xiàn)線條上的文字功能分享到腳本之家平臺(tái)供大家參考
2017-12-12
基于MooTools的很有創(chuàng)意的滾動(dòng)條時(shí)鐘動(dòng)畫(huà)
一款很有創(chuàng)意的時(shí)鐘js動(dòng)畫(huà).是利用系統(tǒng)滾動(dòng)條來(lái)構(gòu)成一個(gè) 時(shí):分:秒的盤(pán). 再利用滾動(dòng)條的長(zhǎng)度變化做過(guò)渡動(dòng)畫(huà).
2010-11-11
js實(shí)現(xiàn)prototype擴(kuò)展的方法(字符串,日期,數(shù)組擴(kuò)展)
這篇文章主要介紹了js實(shí)現(xiàn)prototype擴(kuò)展的方法,實(shí)例分析了JavaScript針對(duì)字符串、日期、數(shù)組等的prototype擴(kuò)展相關(guān)技巧,需要的朋友可以參考下
2016-01-01