首页 > 网络编程 > JavaScript > javascript技巧 > 属性

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; 
} 
}

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

打包下载