• 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属性值和到当前窗口左边的真实值之间的距离

  • 相关阅读:
    图片一句话木马简单制作方法
    kali各工具使用介绍
    隐写工具zsteg安装及使用教程
    内网渗透中mimikatz的使用
    kali meterpreter中mimikatz模块获取密码
    一个恐怖份子上传了这张照片到社交网络。里面藏了什么信息?
    攻防世界MISC进阶之签到题
    EMC存储重装系统分区丢失恢复方法
    服务器数据迁移方法
    教您分辨U盘不能识别是哪儿坏了
  • 原文地址:https://www.cnblogs.com/jellychow/p/3142827.html
Copyright © 2020-2023  润新知