zoukankan      html  css  js  c++  java
  • offsetLeft,clientX ,offsetX 定义和区别

    offsetLeft,clientX ,offsetX 定义和区别

    关于元素大小位置等信息的一些属性。有:

    clientLeft和clientTop

    clientWidth和clientHeight

    offsetLeft和offsetTop

    offsetParent

    offsetWidth和offsetHeight

    scrollLeft和scrollTop

    scrollWidth和scrollHeight

    clientLeft,clientTop:表示内容区域的左上角相对于整个元素左上角的位置(包括边框)。(取决于边框的像数值?)

    clientWidth,clientHeight:内容区域的宽高,不包括边框宽度值。

    offsetLeft,offsetTop:相对于最近的祖先定位元素。

    offsetParent:某元素的父元素 例如:this.offsetParent.tagName.toLowerCase() 得到body...

    offsetWidth,offsetHeight 整个元素的尺寸(不包括变宽的宽度)

    scrollLeft,scrollTop:元素滚动的大小

    scrollWidth,scrollHeight:整个内容区域的宽度(包括需拉动滚动条隐藏起来的那些部分) scrollTop+clientWidth

    scrollWidth:获取对象的滚动宽度

    scrollHeight: 获取对象的滚动高度。

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

    event.clientX 相对文档的水平座标

    event.clientY 相对文档的垂直座标

    event.offsetX 相对容器的水平坐标

    event.offsetY 相对容器的垂直坐标

    scrollHeight: 对象的滚动高度(滚动条的高度,可滚动的高度)

    scrollWidth: 对象的滚动宽度(同上)

    scrollLeft: 对象左边界和窗口中目前可见内容的左端之间的距离(滚动条已滚动的距离)

    scrollTop: 对象最顶端和窗口中可见内容的最顶端之间的距离(同上)

    offsetHeight: 对象相对于版面或offsetParent 的高度(可见部分的宽度加上滚动条实体的宽度)

    offsetWidth: 对象相对于版面或offsetParent 的宽度

    offsetLeft: 对象相对于版面或由 offsetParent 左侧位置

    offsetTop:对象相对于版面或由 offsetTop 顶端位置

    clientX: 相对文档的水平坐标

    clientY: 相对文档的垂直坐标

    clientWidth:相对文档的宽度(可见部分的宽度)

    clientHeight:相对文档的高度

    event.offsetX: 相对容器的水平坐标

    event.offsetY : 相对容器的垂直坐标

  • 相关阅读:
    [翻译角]Headline English: A Captain Should Be Pitch Perfect at a Multitude of Skills (ESLPOD Blog)
    CF735D Taxes 哥德巴赫猜想判定素数 进一步猜想
    CF735C 数论平衡树叶子节点的最大深度贪心斐波那契条件归一化
    萌新的旅行&hdu5681单调队列的应用前缀和线段树ST表倍增解法
    CF731C Socks并查集(森林),连边,贪心,森林遍历方式,动态开点释放内存
    玲珑杯1007-A 八进制大数加法(实现逻辑陷阱与题目套路)
    关于石子合并
    codeforces724-B. Batch Sort
    codeforces724-A. Checking the Calendar 日期题
    如何筛选人
  • 原文地址:https://www.cnblogs.com/moluxi/p/13601338.html
Copyright © 2011-2022 走看看