zoukankan      html  css  js  c++  java
  • jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法

    jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法


    offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑定元素上边框相对于html上边界的偏移量。
    offsetTop是原生JS的方法,它获取的是你绑定元素上边框相对离自己最近且position属性为非static的祖先元素的偏移量
    offset().top与offsetTop偏移量参照对象不同,offset().top始终是html,而offsetTop参照的对象是可变的。
    jquery.offset()的实现:

    function offset(curEle){
                 var totalLeft = null,totalTop = null,par = curEle.offsetParent;
                //首先把自己本身的进行累加
                totalLeft += curEle.offsetLeft;
                totalTop += curEle.offsetTop;
    
                //只要没有找到body,我们就把父级参照物的边框和偏移量累加
                while(par){
                         if(navigator.userAgent.indexOf("MSIE 8.0") === -1){
                             //不是标准的ie8浏览器,才进行边框累加
                             //累加父级参照物边框
                             totalLeft += par.clientLeft;
                             totalTop += par.clientTop;
                         }
                        //累加父级参照物本身的偏移
                        totalLeft += par.offsetLeft;
                        totalTop += par.offsetTop;
                        par = par.offsetParent;
                }
                return {left:totalLeft,top:totalTop};
    }
    console.log(offset(box).top);
    
    

    offsetParent详解:

    1. offsetParent定义:那么offsetParent就是距离该子元素最近的进行过定位的父元素(position:absolute relative fixed),如果其父元素中不存在定位则offsetParent为:body元 素
    2. 根据定义分别存在以下几种情况
      【1】元素自身有fixed定位,父元素不存在定位,则offsetParent的结果为null(firefox中为:body,其他浏览器返回为null)
      【2】元素自身无fixed定位,且父元素也不存在定位,offsetParent为body元素
      【3】元素自身无fixed定位,且父元素存在定位,offsetParent为离自身最近且经过定位的父元素
      【4】body元素的offsetParent是null
  • 相关阅读:
    AWVS 安全渗透扫描
    Nmon 监控结果分析
    Jmeter 插件图表分析
    Nmon 安装
    子母钟系统(卫星时钟系统)在医院网络中的架设与设计
    从NTP网络授时到社交GPS千奇百怪的应用方式
    NTP网络时钟系统技术参数与详细介绍
    GPS北斗子母钟系统在某机场系统中的应用
    GPS北斗时间频率信号源的定义及简介
    ntp对时服务器同步网络中计算机详细配置
  • 原文地址:https://www.cnblogs.com/chenluqing/p/11429383.html
Copyright © 2011-2022 走看看