文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

首頁 > web前端 > js教程 > 主體

基於javascript的JSON格式頁面展示美化方法_javascript技巧

WBOY

發布： 2016-05-16 16:42:41

原創

1291 人瀏覽過

{"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結合可實現頁面展示轉換

相關標籤：

json格式

來源：php.cn

上一篇：ff chrome與ie下全域動態定位的異同及全域高度的取法_javascript技巧下一篇：原生js事件的新增與刪除的封裝_javascript技巧

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章