1.offsetLeft,offsetTop

offsetLeft, offsetTop의 브라우저별 표현 차이

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>document</title>

<style>

div{ padding:40px 50px;}

#div1 { background:red;}

#div2 { background:blue; position:relative;}

#div3 { background:orange;}

</style>

<script type="text/javascript">

    

    window.onload = function() {

        

        var oDiv3 = document.getElementById('div3');

        /*

            offsetLeft:    　  　          （   ）

                      offsetParent   

                        

                    offsetParent -> body

                    offsetLeft[html] -> html

                

                       

                    

                    ie7：        ，  offsetLeft[Top]  body   

                               ，            

                      ：        

        */

        alert(oDiv3.offsetLeft);

    }

    

</script>

</head>



<body id="body">

    <div id="div1">

        <div id="div2">

            <div id="div3">

            

            </div>

        </div>

    </div>

</body>

</html>

원소의 결점을 페이지로 가져오는 절대 거리

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>document</title>

<style>

div{ padding:40px 50px;}

#div1 { background:red;}

#div2 { background:blue; position:relative;}

#div3 { background:orange;}

</style>

<script type="text/javascript">

    

    window.onload = function() {

        

        var oDiv3 = document.getElementById('div3');

        //alert(oDiv3.offsetLeft);

        /*var iTop = 0;

        var obj = oDiv3;

        while(obj) {

            alert(obj.id + ':' + obj.offsetTop);

            iTop += obj.offsetTop;

            obj = obj.offsetParent;

            alert(obj + obj.id);

        }*/

        //alert(iTop);

        var p = getPos(oDiv3);

        alert(p.left);

        //                 

        function getPos(obj) {

            

            var pos = {left:0,top:0};

            

            while(obj) {

                pos.left += obj.offsetLeft;

                pos.top += obj.offsetTop;

                obj = obj.offsetParent;

            }

            return pos;

        }

        

    }

    

</script>

</head>



<body id="body">

    <div id="div1">

        <div id="div2">

            <div id="div3">

            

            </div>

        </div>

    </div>

</body>

</html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

innerjoin과 leftjoin 사이의 차이에 대한 상세한 설명

innerjoin과 leftjoin 간의 차이에 대해 예전에는 자신이 이해한 줄 알았는데 오늘은 앞에서 파라미터를 찾았을 때 예상한 결과가 아니라는 것을 발견하고 innerjoin에서 문제가 발생했다는 것을 알게 되...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

1.offsetLeft,offsetTop

좋은 웹페이지 즐겨찾기