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需再刷新一下页面才能执行]

打包下载

属性

深入解析ES6中的promise
ES6中的promise对象很早就听说过，据说是为了解决我们使用回调产生回调地狱的问题。今天小编就带领大家通过本文学习下es6中的promise，感兴趣的朋友跟随小编一起看看吧
2018-11-11
Javascript Memoizer浅析
这篇文章主要介绍了Javascript Memoizer浅析,Memoizer貌似是一种缓存方法调用结果的功能,小编也没有太懂,需要的朋友参考下吧
2014-10-10
微信小程序使用Vant Weapp组件库的方法步骤
这篇文章主要给大家介绍了关于微信小程序使用Vant Weapp组件库的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-08-08
每天一篇javascript学习小结（Boolean对象）
这篇文章主要介绍了javascript中的Boolean对象知识点，对Boolean对象的基本使用方法进行解释，一段很详细的代码介绍，感兴趣的小伙伴们可以参考一下
2015-11-11
Ajax提交与传统表单提交的区别说明
本篇文章主要是对Ajax提交与传统表单提交的区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
html代码调试脚本
html代码调试脚本...
2006-07-07
javascript String 的扩展方法集合
String 的扩展方法集合，可以是javascript对string的功能更多
2008-06-06
微信小程序单选框自定义赋值
这篇文章主要介绍了微信小程序单选框如何自定义赋值，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
JavaScript深入浅出__proto__和prototype
这篇文章主要介绍了JavaScript深入浅出__proto__和prototype，文章基于JavaScript的相关资料展开详细的内容介绍。具有一定的参考价值，需要的小伙伴可以参考一下
2022-05-05
前台js对象在后台转化java对象的问题探讨
在开发项目中多次遇到前台js对象在后台转化java对象的问题，下面就为大家介绍下前台js对象转后台java对象，感兴趣的朋友可以了解下
2013-12-12

JS当前属性查询实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具