javascript对象查看器

时间:2022-04-23
本文章向大家介绍javascript对象查看器,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 3</title>
</head>

<body>
<table border="1">
    <tr>
        <td id="td">obj</td>
    </tr>
</table>
</body>
<script language="javascript">
<!--
window.obj = {
    Name : 'lisq',
    Old : 24,
    Birthday : '1981-7-24',
    O : {
        o : {
            Name : 'lufang'
        }
    },
    F: function(){
        var i = 100
    }
}



var td = document.getElementById('td')
td.onmouseover = function(){
    Show(this.innerHTML)
}

function ao(a,aa){var ab=0;while(a!=null){ab+=a["offset"+(aa?"Left":"Top")];a=a.offsetParent}return ab}

var arrDiv = []
function Show(objDescript){
    var o
    try{
        o = eval(objDescript)
    }catch(e){
        alert(objDescript)
        alert('dead here')
        return
    }
    
    var div = document.createElement('div')
    div.style.border = 'solid 1px'
    div.style.position = 'absolute'
    if(event.srcElement == window){
        div.style.left = event.clientX
        div.style.top = event.clientY
    }else{
        div.style.left = ao(event.srcElement.parentElement, true) + 20 + 'px'
        div.style.top  = ao(event.srcElement.parentElement, false) + 20 + 'px'
    }
    for(p in o){
        if(typeof(o[p]) == 'object'){
            var descript = objDescript + '["' + p + '"]'
            div.innerHTML += '<span><a onclick=Show('' + descript + '') style="cursor:hand">+</a>' + p + '</span><br />'
        }else{
            div.innerHTML += '<span>' + p + ':' + o[p] + '</span><br />'
        }
    }
    document.body.appendChild(div)
    arrDiv.push(div)
    div.onmouseout = function(){
        //this.style.display = 'none'
    }
}
//-->
</script>
</html>