JS当前属性查询实现代码

更新时间：2010年12月06日 21:22:42 作者：

JS中的for in 可遍历变量的所有属性！利用此特性制作了一个JS当前属性查询！

单页面下载

<!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, '&amp;'); strHTML = strHTML.replace(/</g, '&lt;'); strHTML = strHTML.replace(/>/g, '&gt;'); strHTML = strHTML.replace(/\n/g, '<br>'); strHTML = strHTML.replace(/\t/g, '&emsp; &emsp; '); strHTML = strHTML.replace(/ /g, '&nbsp;'); 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 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需再刷新一下页面才能执行]

打包下载

属性

js 执行上下文和作用域的相关总结
这篇文章主要介绍了js 执行上下文和作用域的相关知识总结，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2021-02-02
javascript数组去重方法汇总
数组去重复是一个常见的需求，我们暂时考虑同类型的数组去重复。主要是理清思路和考虑下性能。以下方法，网上基本都有，这里只是简单地总结一下。
2015-04-04
梳理总结JavaScript的23个String方法
文章主要介绍了梳理总结JavaScript的23个String方法,JavaScript 中的String类型用于表示文本型的数据。它是由无符号整数值作为元素而组成的集合,更多详细内容需要的朋友可以参考一下
2022-07-07
微信小程序自定义多列选择器使用
这篇文章主要为大家详细介绍了微信小程序自定义多列选择器使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JavaScript中为事件指定处理程序的五种方式分析
这篇文章主要介绍了JavaScript中为事件指定处理程序的五种方式,结合实例形式简单分析了JavaScript事件处理的相关原理与事件指定处理程序的五种常用方式,需要的朋友可以参考下
2018-07-07
关于Blog顶部的滚动导航条代码
关于Blog顶部的滚动导航条代码...
2006-09-09
JavaScript实现将Word文档解析成浏览器认识的HTML
这篇文章主要为大家详细介绍了如何使用JavaScript实现将Word文档解析成浏览器认识的HTML,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
2024-02-02
JS获取当前时间的实例代码(昨天、今天、明天)
这篇文章主要介绍了JS获取当前时间的实例代码(昨天、今天、明天) ,需要的朋友可以参考下
2018-11-11
JS与jQuery判断文本框还剩多少字符可以输入的方法
这篇文章主要介绍了JS与jQuery判断文本框还剩多少字符可以输入的方法,简单分析了js字符个数统计的方法,并给出了jQuery字符统计插件textlimit的相关使用方法示例,需要的朋友可以参考下
2018-09-09
ES6顶层对象、global对象实例分析
这篇文章主要介绍了ES6顶层对象、global对象,结合实例形式分析了ES6顶层对象与global对象的概念、原理、用法及相关操作注意事项,需要的朋友可以参考下
2019-06-06