zoukankan      html  css  js  c++  java
  • CSSOM视图模式(CSSOM View Module)相关整理:scrollWidth,scrollLeft,offsetLeft,clientX ,offsetX 定义和区别

    转:http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/

    四、元素视图属性

    关于元素大小位置等信息的一些属性。有:
    clientLeftclientTop
    clientWidthclientHeight
    offsetLeftoffsetTop
    offsetParent
    offsetWidthoffsetHeight
    scrollLeftscrollTop
    scrollWidthscrollHeight


    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 : 相对容器的垂直坐标

  • 相关阅读:
    LInux 安装 MySQL
    JS BUG 传递数字过大,数据值会变化
    tabs 标签样式
    【异常】IOException parsing XML document from class path resource [xxx.xml]
    云服务器启动tomcat巨慢,很慢
    Linux修改/etc/profile配置错误command is not found自救方法
    linux 安装 vsftpd服务
    为什么说 Vue 的响应式更新比 React 快
    在idea中使用git拉去最新代码并merge到本地代码中
    解决重新打开一个项目,idea需要重新配置maven的问题
  • 原文地址:https://www.cnblogs.com/lixiangyong/p/5532142.html
Copyright © 2011-2022 走看看