zoukankan      html  css  js  c++  java
  • clientWidth,offsetWidth,scrollWidth 快速理解

    下面开始区分

        一、clientWidth和clientHeigh 、 clientTop和clientLeft
            1,clientWidth的实际宽度

            clientWidth = width+左右padding

            2,clientHeigh的实际高度

             clientHeigh = height + 上下padding 

            3,clientTop的实际宽度

               clientTop = boder.top(上边框的宽度)

            4,clientLeft的实际宽度

                clientLeft = boder.left(左边框的宽度)

        二、offsetWidth和offsetHight 、 offsetTop和offsetLeft
             1, offsetWidth的实际宽度

                offsetWidth = width + 左右padding + 左右boder

             2, offsetHeith的实际高度

                offsetHeith = height + 上下padding + 上下boder

             3, offsetTop实际宽度

                offsetTop:当前元素 上边框 外边缘 到 最近的已定位父级(offsetParent) 上边框 内边缘的 距离。如果父级都没有定位,则分别是到body 顶部 和左边的距离.

             4, offsetLeft实际宽度

                offsetLeft:当前元素 左边框 外边缘 到 最近的已定位父级(offsetParent) 左边框 内边缘的距离。如果父级都没有定位,则分别是到body 顶部 和左边的距离

        三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft
            1,scrollWidth实际宽度

                scrollWidth:获取指定标签内容层的真实宽度(可视区域宽度+被隐藏区域宽度)。

            2,scrollHeight的实际高度

         scrollHeight:获取指定标签内容层的真实高度(可视区域高度+被隐藏区域高度)

             3,scrollTop

                 scrollTop :内容层顶部 到 可视区域顶部的距离。

              实例:var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

              持续获取高度的方式:

                window.addEventListener('scroll', ()=>{

          var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

         });

             

       4,scrollLeft

                  scrollLeft:内容层左端 到 可视区域左端的距离.

      注:原文链接:https://blog.csdn.net/qq_42089654/article/details/80515916

  • 相关阅读:
    给你的程序增加热键(C#)
    C#中的键盘处理
    可以给img元素设置背景图
    如何利用JS实现对后台CS代码的调用
    李阳疯狂英语300句
    如何基于linux创造财富
    3d材质贴图常用参数
    asp.net下检测远程URL是否存在的三种方法
    ASP.NET 配置
    服务器硬盘空间操作
  • 原文地址:https://www.cnblogs.com/cnblogs-jcy/p/12160677.html
Copyright © 2011-2022 走看看