offset,client,scroll的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 1000px;
            width: 1600px;
        }
        #div1{
            width: 100px;
            height: 50px;
            padding: 10px;
            border: 1px solid red;
            margin: 10px;
        }

        #father{
            width: 400px;
            height: 200px;
            padding: 10px;
            border: 1px solid red;
            position: relative;
        }

        #son{
            width: 100px;
            height: 50px;
            border: 1px solid yellow;
            margin: 50px 60px;
        }
        #box{
            width: 200px;
            height: 50px;
            border: 2px solid darkcyan;

        }
    </style>
</head>
<body>
<div id="div1"></div>

<div id="father">
    <div id="son"></div>
</div>

<div id="yeye" style="position: relative;">
    <div id="baba" style="position: relative;">
        <div id="erzi"></div>
    </div>
</div>
<div id="box">
    <p>hhh</p>
    <p>hhh</p>
    <p>hhh</p>
    <p>hhh</p>
    <p>hhh</p>
    <p>hhh</p>
    <p>hhh</p>
</div>
<script src="../myTool.js"></script>
<script>
    console.log(document.compatMode)
     var div1=myTool.$("div1")
     console.log(div1);
     //1. ---------offset,用于获取元素自身相关的

   /* offsetWidth ,offsetHeight 用于获取元素自身的
   * 宽高度 包含内容，内边距，边框 offset=content+padding+
   * border    ,不包含margin*/

     console.log("offsetWidth",div1.offsetWidth);
     console.log(div1.offsetHeight);
     console.log("scrollWidth",div1.scrollWidth)
     console.log("scrollHeight",div1.scrollHeight)
     /*offsetTop  offsetLeft  元素距离第一个有定位
     * 的父元素的上边和左边的距离(子元素边框到第一个
     * 定位父元素边框的距离)*/

     var father=myTool.$("father")
     var son=myTool.$("son")

     console.log("offsetTop",son.offsetTop);
     console.log(son.offsetLeft);


     /*offsetParent  返回最近的定位父元素的对象 */


    var erzi=myTool.$("erzi")
    console.log("offsetParent",erzi.offsetParent)

    //---------------scroll

    /*scrollTop scrollLeft 网页被卷去的高 左边距离
    * scrollWidth  scrollHeight 网页正文宽高或
    * 元素内部能够滚动的宽度可高度
    * */
     console.log(document.documentElement.scrollWidth);
     console.log(document.documentElement.scrollHeight);
     window.onscroll=function () {
     /*  var a=document.documentElement
       console.log("scrolltop",a.scrollTop);
       console.log("scrollleft",a.scrollLeft);*/

       //高版本浏览器获取页面滚动高度属性
        /* console.log(window.pageYOffset)
         console.log(window.pageXOffset)*/



     /*  console.log("scrollwidth",a.scrollWidth);
       console.log("scrollheight",a.scrollHeight);*/

     //兼容写法
         var scroolTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop


   }

//---------------------client

     /*clientWidth clientHeight 网页可见区域宽高
     * clientWidth=content+padding (不包括边框)
     * */
    console.log("clientwidth",div1.clientWidth)
    console.log("clientheight",div1.clientHeight)

   /*clientTop clientLeft 获取元素边框的宽度border-width*/
      var box=myTool.$('box')
    console.log(box.clientLeft);
    console.log(box.clientTop);

    console.log(box.scrollHeight)
    console.log(box.scrollWidth)
</script>
</body>
</html>
posted @ 2020-06-17 23:28  岱宗如何  阅读(161)  评论(0)  编辑  收藏  举报