textbox 距页面上边框和左边框的距离

最新推荐文章于 2022-04-12 10:33:46 发布

征服者X

最新推荐文章于 2022-04-12 10:33:46 发布

阅读量3.4k

点赞数

分类专栏： javascript 文章标签： textbox function input

本文链接：https://blog.csdn.net/li_ser/article/details/5075159

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script>
    /* * 获取元素距BODY上边框的距离 */
    function getTop(obj){
        var height = 0;
        while(obj.tagName.toUpperCase() != "BODY") { height+=obj.offsetTop; obj = obj.offsetParent;
        }
        return height;
    }

    /*
     * 获取元素距BODY左边框的距离
     */
    function getLeft(obj){
        var width = 0;
        while(obj.tagName.toUpperCase() != "BODY")
        {
            width+=obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return width;
    }

    window.onload = function(){
        var txt1 = document.getElementById("txt1");
        alert(getTop(txt1));
        alert(getLeft(txt1));
        var txt2 = document.getElementById("txt2");
        alert(getTop(txt2));
        alert(getLeft(txt2));
    };
</script>
</head>

<body>
<div style="position:absolute;left:100px;top:200px">
<input type=text value="" id="txt1"/>
<input type=text value="" id="txt2"/>
</div>
</body>

</html>