zoukankan      html  css  js  c++  java
  • offset() position() scrollTop() scrollLeft()

    (1)offset:获取当前元素相对于文档的高度。只对可见元素有效。

      不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移

     (2) position:获取元素相对于最近的一个position为relative or absolute的元素的祖父节点的相对偏移。

      事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置,如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移

    (3)scrollTop/scrollLeft:是分别获取元素滚动条距顶端的距离。

    ---------------------------------------------------------------------------------------------------------------------------------------

    offsetLeft,scrollLeft,offsetTop,scrollTop等等的用法

    clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。 
    clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。 
    offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 
    offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 
    screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 
    screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 
    x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。 
    y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。

      1. clientX 和x值在实验过程中,没有发现值不一样的例子,所以我认为它们在效果上是一样的!
      2.   offsetX 是相对于当前窗口内,本触发事件对象(或者是某一区域)而言,如本例中你单击a区域,值是相对于a所在<td>区域而言,同理b,c,d都一样!
      3.   clientX ,x,offsetX共同点:它们是相对位置,相对于当前窗口,只是offsetX相对于当前窗口的某个触发对象的父容器而言!
      4.   screenX是相对与客户端显示器而言,是绝对位置

    1,scrollHeight: 获取对象的滚动高度,对象的实际高度;

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

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

    4,scrollWidth:获取对象的滚动宽度

    5,offsetHeight:获取对象相对由父坐标 offsetParent 属性指定的父坐标的高度

    6,offsetLeft:获取当前对象到其上级层左边的距离.

    7,offsetTop:获取当前对象到其上级层顶部的距离.

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

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

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

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

    12,document.documentElement.scrollTop 垂直方向滚动的值

    13,event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

    14,clientLeft   返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离

  • 相关阅读:
    tornado硬件管理系统-数据存储与表格实时监控(8)
    db2 内存研究
    Oracle dml开始到commit期间的流程
    用户界面与业务逻辑的分离
    计算器核心算法——终结版
    计算器核心算法——中缀表达式转为后缀表达式
    计算器核心解析算法(上)
    Qt中的字符串类
    初探Qt中的消息处理
    计算器界面代码重构
  • 原文地址:https://www.cnblogs.com/jellychow/p/3142827.html
Copyright © 2011-2022 走看看