zoukankan      html  css  js  c++  java
  • 页面宽高,窗口宽高,元素宽高,元素位置,页面滚动距离

    注:以下内容只适用于chrome

    页面宽高:

    document.body.clientWidth/Height(不包括margin)

    document.body.offsetWidth/Height(不包括margin)

    document.body.scrollWidth/Height(包括margin)

    tips:

    1.如果不是最大化浏览器窗口,且在body标签设置min-width,document.body.offsetWidth会比document.body.clientWidth多出2px,那就是滚动条旁边的2px空白空间。

    2.有时候,没设置overflow:hidden;图片会撑出页面宽度。从而,你认为有横向滚动条的页面宽度数值不准。

    窗口viewport宽高:

    window.innerWidth/Height(带滚动条)

    document.documentElement.clientWidth/Height(不带滚动条)

    元素宽高:

    element.offsetWidth/Height(width+padding+border)

    element.scrollWidth/Height(width+padding,没加border)

    元素位置:

    element.offsetTop/Left(相对于父元素offsetParent对象) 

    通过递归父元素,获取父元素的offsetTop/Left即可获取元素相对于页面的位置

    function getElementTop(element){
        var actualTop = element.offsetTop;
        var current = element.offsetParent;

        while (current !== null){
          actualTop += current.offsetTop;
          current = current.offsetParent;
        }

        return actualTop;
      }

    另一种方法,

    使用getBoundingClientRect()方法获取元素相对于窗口的距离,返回的是left、right、top、bottom,width和height

    var X= this.getBoundingClientRect().left+document.body.scrollLeft;

    var Y =this.getBoundingClientRect().top+document.body.scrollTop;

    页面滚动距离:

    window.pageXOffset/window.pageYOffset

    document.body.scrollTop/document.body.scrollLeft

    参考链接:

    http://www.cnblogs.com/dolphinX/archive/2012/11/19/2777756.html

    http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

    http://blog.jobbole.com/44319/

  • 相关阅读:
    【转】WPF的知识
    【转】WPF绑定模式
    【转】关于easyui的窗口和tab页面不执行js说明
    【转】 jquery easyui Tab 引入页面的问题
    【转】.NET+AE开发中常见几种非托管对象的释放
    【转】C# Graphics类详解
    【转】句柄概念
    storm从入门到放弃(一),storm介绍
    Spark的误解-不仅spark是内存计算,hadoop也是内存计算
    TCP连接中time_wait在开发中的影响-搜人以鱼不如授之以渔
  • 原文地址:https://www.cnblogs.com/samwu/p/4011724.html
Copyright © 2011-2022 走看看