zoukankan      html  css  js  c++  java
  • offset / scroll / client Left / Top

    1.offsetHeight / Width (只读)

      offsetHeight:表示该元素在垂直方向占用的空间大小,包含元素的高度+上边框高度+下边框高度

      offsetWidth:表示该元素在水平方向占用的空间大小,包含元素的宽度+左边框宽度+右边框宽度

    2.clientHeight / clientWidth (只读)

      clientHeight:元素内容区的高度+元素内边距的高度

      clientWidth:元素内容区的宽度+元素内边距的宽度

      clientWidth = width + padding
      offsetWidth = width + padding + border = client + border

      注:该元素未设置:box-sizing:border-box

    3.scrollHeight / scrollWidth

      无滚动条的情况下,与client相似,但不同浏览器有不同的差别

      在滚动条存在的情况下,等于client + 滚动条所蜷缩的高度或宽度

    总结:

      在确定文档的总高度时,必须取得scrollWidth / clientWidth 和 scrollHeight / clientHeight 中的最大值,才能保证跨浏览器的环境下得到精确的结果

     

     var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
    
     var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

      注意:在混杂模式下的IE,需要用document.body代替document.documentElement

    4.scrollTop / scrollLeft

      获取滚动条滚动的距离

    5.offsetLeft / offsetTop (只读,并且没有单位)

      offsetLeft :元素的左外边框至包含元素的左内边框之间的像素距离

      offsetTop : 元素的上外边框至包含元素的上内边框之间的像素距离

      只能通过style.left / top来修改

      

  • 相关阅读:
    十万个为什么
    安装VmwareTools遇到的问题
    CentOS7没有ifconfig命令怎么办
    ftp/ http/ https/ tcp的关系
    C/S和B/S架构
    Nginx 安装以及验证教程
    osi七层模型
    在linux上安装tenginx
    Awvs、Snort的下载安装
    Laravel——DI(依赖注入)
  • 原文地址:https://www.cnblogs.com/DB-IT/p/8451477.html
Copyright © 2011-2022 走看看