• 总结与元素坐标相关的属性(再也搞不混了)


     
    与元素坐标相关属性:
     

    1.HTML元素

    html元素是网页的根元素,document.documentElement就指向这个元素。

    1.1 clientWidth, clientHeight

    这两个属性返回视口(viewport)的大小,单位为像素。所谓“视口”,是指用户当前能够看见的那部分网页的大小。document.documentElement.clientWidthdocument.documentElement.clientHeight,基本上与window.innerWidthwindow.innerHeight同义。但是前者不将滚动条计算在内(很显然,滚动条和工具栏会减小视口大小),而后者包括了滚动条的高度和宽度。

    1.2 offsetWidth,offsetHeight

    这两个属性返回html元素的宽度和高度,即网页的总宽度和总高度。


    2.Element对象

    2.1 clientHerght, clientWidth, clientLeft, clientTop

    这几个属性与元素节点可见区域的坐标相关。如果一个元素是滚动的,clientWidth和clientHeight只计算它的可见部分的宽度和高度。

    (1) clientHeight

    clientHeight属性返回元素节点的可见高度,包括padding、但不包括水平滚动条、边框和margin的高度,单位为像素。

    (2) clientWidth

    clientWidth属性等于网页元素的可见宽度,即包括padding、但不包括垂直滚动条(如果有的话)、边框和margin的宽度,单位为像素。

    (3) clientTop

    clientTop属性表示一个元素顶部边框的宽度,不包括顶部的margin和padding。单位为像素。

    (4) clientLeft

    clientLeft属性表示一个元素左边边框的宽度,不包括左侧的margin和padding。单位为像素。

    2.2 scrollHeight, scrollWidth, scrollLeft, scrollTop

    这几个属性与元素节点占据的总区域的坐标相关。

      (1) scrollHeight

    scrollHeight属性返回指定元素的总高度,包括由于溢出而无法展示在网页的不可见部分。如果一个元素是可以滚动的,则scrollHeight 包括整个元素的高度,不管是否存在垂直滚动条。scrollHeight属性包括padding,但不包括border和margin。该属性为只读属 性。

     
    (2) scrollWidth

    scrollWidth属性返回元素的总宽度,包括由于溢出容器而无法显示在网页上的那部分宽度,不管是否存在水平滚动条。该属性是只读属性。

    (3) scrollTop

    scrollTop属性设置或返回垂直滚动条向下滚动的像素数量。它的值等于元素的顶部与其可见的最高位置之间的距离。对于那些没有滚动条或不需要滚动的元素,该属性等于0。该属性是可读写属性,设置该属性的值,会导致浏览器将指定元素自动滚动到相应位置。

    (4) scrollLeft

    scrollLeft属性设置或返回水平滚动条向右侧滚动的像素数量。它的值等于元素的最左边与其可见的最左侧之间的距离。对于那些没有滚动条或不需要滚动的元素,该属性等于0。该属性是可读写属性,设置该属性的值,会导致浏览器将指定元素自动滚动到相应的位置。


    3.window对象的大小和位置

    3.1 window.screenX,  window.screenY

    window.screenXwindow.screenY属性,返回浏览器窗口左上角相对于当前屏幕左上角((0, 0))的水平距离和垂直距离,单位为像素。

    3.2 window.innerHeight, window.innerWidth

    window.innerHeightwindow.innerWidth属性,返回网页在当前窗口中可见部分的高度和宽度,即“视口”(viewport),单位为像素。

    当用户放大网页的时候(比如将网页从100%的大小放大为200%),这两个属性会变小。因为这时网页的像素大小不变,只是每个像素占据的屏幕空间变大了,因为可见部分(视口)就变小了。

    这两个属性值包括滚动条的高度和宽度。

    3.3 window.outerHeight, winodw.outerWidth

    window.outerHeightwindow.outerWidth属性返回浏览器窗口的高度和宽度,包括浏览器菜单和边框,单位为像素。

    3.4 window.pageXOffset, window.pageYOffset

    window.pageXOffset属性返回页面的水平滚动距离,window.pageYOffset属性返回页面的垂直滚动距离,单位都为像素。

  • 相关阅读:
    寒武纪芯片——有自己的SDK,支持tf、caffe、MXNet
    专车降价滴滴快车使命终结?
    滴滴代驾骑虎难下 司机1人23部手机刷单
    柳青:再见!滴滴打车 其实这里面都是故事
    “专车”监管意见最快本月公布
    不少专车司机考虑退出
    专车新规或下周发布,估计有大量司机流失
    英媒:滴滴和优步每年烧钱64亿
    约租车管理办法近期公布 数量或受地方政府管控
    Uber上海公司被司机打上门
  • 原文地址:https://www.cnblogs.com/coco-163/p/5884474.html
Copyright © 2020-2023  润新知