• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > 前端开发 > offset,client,scroll的区别

    offset,client,scroll的区别

    作者: 分类:前端开发 点击: 44 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的头条号,我会每天更新免费视频课程。

      <!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>


      欢迎“关注”我的头条号,我会每天更新免费视频课程。

      头条二维码
      关注我的头条号
      头条二维码
      加入我的QQ群

    文章作者:sunny
    本文地址:http://wanlimm.com/77202006198257.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.