JS當前屬性查詢實現代碼

2019-11-21 00:03:35

字體：大中小

來源：轉載

供稿：網友

單頁面下載

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>網站標題</title> <style type="text/css"> #div1 .bObject { cursor:pointer; color:Blue; } #div1 .bError { color:Red; } #div1 div { margin-left:20px; border:solid 1px gray; padding:5px; } #div1 th { text-align:left; background-color:#fef; } #div1 td { vertical-align:top; } </style> <script type="text/javascript"> function getObject() { var chkNull = document.getElementById('chkNull'); eval('var obj=' + document.getElementById('txt').value + ';'); var str = '<table border="1" cellpadding="3" style="border-collapse:collapse;">'; str += '<tr><th>類型</th><th>名稱</th><th>值</th></tr>'; for (var i in obj) { var strItem = '<tr>'; try { if(chkNull.checked && (obj[i] == null || obj[i] == undefined)){ continue; } strItem += '<td>' + typeof (obj[i]) + '</td>'; if (obj[i] != null && typeof (obj[i]) == 'object') { strItem += '<td><b class="bObject">' + i + '</b></td>'; } else { strItem += '<td><b>' + i + '</b></td>'; } if (obj[i] != null && (typeof (obj[i]) == 'string' || typeof (obj[i]) == 'function')) { strItem += '<td>' + formatHTML(obj[i]) + '</td>'; } else { strItem += '<td>' + obj[i] + '</td>'; } strItem += '</tr>'; } catch (e) { strItem = '<tr><td class="bError" colspan="3">' + i + ' error:' + e + '</td></tr>'; } str += strItem; } str += '</table>'; var div1 = document.getElementById('div1'); div1.innerHTML = str; var bs = div1.getElementsByTagName('b'); for (var i = 0; i < bs.length; i++) { if (bs[i].className == 'bObject') { bs[i].onclick = show; } } } function formatHTML(obj) { var strHTML = obj.toString(); if (strHTML.length > 10000) { return '字符長度：' + strHTML.length + '字節'; } strHTML = strHTML.replace(/&/g, '&'); strHTML = strHTML.replace(/</g, '<'); strHTML = strHTML.replace(/>/g, '>'); strHTML = strHTML.replace(//n/g, '<br>'); strHTML = strHTML.replace(//t/g, '    '); strHTML = strHTML.replace(/ /g, ' '); return strHTML; } function goUp() { var txt = document.getElementById('txt'); if (txt.value.lastIndexOf(']') == txt.value.length - 1) { txt.value = txt.value.substr(0, txt.value.lastIndexOf('[')); getObject(); return; } if (txt.value.indexOf('.') != -1) { txt.value = txt.value.substr(0, txt.value.lastIndexOf('.')); getObject(); return; } } function show() { var txt = document.getElementById('txt'); var r = /^/+?[0-9][0-9]*$/; //正整數 if (r.test(this.innerHTML)) { txt.value += '[' + this.innerHTML + ']'; } else { txt.value += '.' + this.innerHTML; } getObject(); } </script> </head> <body> <div> <input id="txt" type="text" value="window" style="width:300px;" /> <div style="margin:10px 0px;"> <input onclick="getObject();" type="button" value="檢 測" /> <input onclick="goUp();" type="button" value="向 上" /> <input id="chkNull" type="checkbox" checked /><label for="chkNull">屏蔽空值</label> </div> </div> <div   class="iwvjtn8m0"   id="div1" style="line-height:1.5; font-family:Consolas; font-size:14px;"> </div> <script type="text/javascript"> getObject(); </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

打包下載

上一篇：JavaScript Accessor實現說明

下一篇：關于Javascript模塊化和命名空間管理的問題說明