JavaScript 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
 <div id="test1" style="position:fixed"></div>

 <div id="test2"></div>

 <div id="div0" style="position:absolute;">
    <div id="div1" style="position:absolute;">
        <div id='test3'></div>
    </div>
</div>

<script>
    /*
    【1】元素自身有fixed定位，父元素不存在定位，则offsetParent的结果为null（firefox中为：body，其他浏览器返回为null）
    */
    var test1 = document.getElementById('test1');
    console.log('test1 offsetParent: ' + test1.offsetParent);
    /*
    【2】元素自身无fixed定位，且父元素也不存在定位，offsetParent为<body>元素
    */
    var test2 = document.getElementById('test2');
    console.log('test2 offsetParent: ' + test2.offsetParent);
    /*
    【3】元素自身无fixed定位，且父元素也不存在定位，offsetParent为<body>元素
    */
    var test3 = document.getElementById('test3');
    console.log('test3 offsetParent: ' + test3.offsetParent);
    /*
    【4】<body>元素的offsetParent是null
    */
     */
    console.log('body offsetParent: ' + document.body.offsetParent);//null

</script>
</body>

</html>

3. IE7中对于定位的offsetParent，存在以下bug

【1】当元素本身经过绝对定位或相对定位，且父级元素无经过定位的元素时，IE7-浏览器下，offsetParent是<html>

<div id="test1" style="position:absolute;"></div>
<script>
//IE7-浏览器返回<html>，其他浏览器返回<body>
console.log(test1.offsetParent);
</script>
<div id="test2" style="position:relative;"></div>
<script>
//IE7-浏览器返回<html>，其他浏览器返回<body>
console.log(test2.offsetParent);
</script>
<div id="test3" style="position:fixed;"></div>
<script>
//firefox并没有考虑固定定位的问题，返回<body>，其他浏览器都返回null
console.log(test3.offsetParent);
</script>

【2】如果父级元素存在触发haslayout的元素或经过定位的元素，且offsetParent的结果为离自身元素最近的经过定位或触发haslayout的父级元素

<div id="div0" style="display:inline-block;">
    <div id='test'></div>
</div>
<script>
//IE7-浏览器返回<div id="div0">，其他浏览器返回<body>
console.log(test.offsetParent);
</script>
<div id="div0" style="position:absolute;">
    <div id="div1" style="display:inline-block;">
        <div id='test'></div>
    </div>
</div>
<script>
//IE7-浏览器返回<div id="div1">，其他浏览器返回<div id="div0">
console.log(test.offsetParent);
</script>
<div id="div0" style="display:inline-block;">
    <div id="div1" style="position:absolute;">
        <div id='test'></div>
    </div>
</div>
<script>
//所有浏览器都返回<div id="div1">
console.log(test.offsetParent);
</script>

到此这篇关于JavaScript offsetParent案例详解的文章就介绍到这了,更多相关JavaScript offsetParent内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS OffsetParent属性深入解析

    offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素. 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素:在怪异呈现模式下为body元素)的引用. 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null. 句法:parentObj

  • js parentElement和offsetParent之间的区别

    首先是 parentElement 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 这里主要说的是 offsetParent 属性,这个属性在 MSDN 的文档中也没有解释清楚,这就让人更难理解这个属性. 这几天在网上找了些资料看看,再加上自己的一些测试,对此属性有了那么一点的了解,在这里总结一下. 要明白 offsetParent 属性,要先明白"已定位元素" 这个名字,所谓&

  • Javascript拖拽系列文章1之offsetParent属性第1/3页

    第一篇就先讲讲Javascript中的offsetParent属性吧. 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ element.offsetParent Summary offsetParent returns a reference to the object which is the closest (nearest in the containment hierarchy

  • JavaScript offsetParent案例详解

    1. offsetParent定义:那么offsetParent就是距离该子元素最近的进行过定位的父元素(position:absolute  relative fixed),如果其父元素中不存在定位则offsetParent为:body元     素 2. 根据定义分别存在以下几种情况 元素自身有fixed定位,父元素不存在定位,则offsetParent的结果为null(firefox中为:body,其他浏览器返回为null) 元素自身无fixed定位,且父元素也不存在定位,offsetPa

  • Javascript 模拟mvc实现点餐程序案例详解

    Javascript 模拟mvc实现点餐程序案例详解

    MVC模式是一个比较成熟的开发模式.M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式.其中,View的定义比较清晰,就是用户界面.今天就来模拟使用MVC模式开发一个点餐程序,当然,只是就此案例来说明MVC在前端的实现参考,并没有完整的实现.程序很简单,与传统的MVC三层架构不谋而合. 首先,先介绍一下场景:顾客进到餐馆,拿着菜单点餐,服务员记录并发到后端厨房,厨师接到订单,按照订单的菜品去制作,制作完毕通知服务员取餐,

  • JavaScript setTimeout与setTimeinterval使用案例详解

    这两个方法都可以用来在固定的时间段后去执行一段javascirpt代码,不过两者各有各的应用场景. 实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码. 虽然表面上看来setTimeout只能应用在on-

  • JavaScript CollectGarbage函数案例详解

    首先看一个内存释放的实例: <SCRIPT LANGUAGE="JavaScript"> <!-- strTest = "1"; for ( var i = 0; i < 25; i ++ ) { strTest += strTest; } alert(strTest); delete strTest; CollectGarbage(); //--> </SCRIPT> CollectGarbage,是IE的一个特有属性,用

  • JavaScript 中this指向问题案例详解

    总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数 全局环境 无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window

  • JavaScript函数之call、apply以及bind方法案例详解

    总结 1.相同点 都能够改变目标函数执行时内部 this 的指向 方法的第一个参数用于指定函数执行时内部的 this 值 支持向目标函数传递任意个参数 若不向方法的第一个参数传值或者传递 undefined.null,则在 JavaScript 正常模式下,目标函数内部的 this 指向 window 对象,严格模式下,分别指向 undefined.null. 2.区别 apply() 方法可接收两个参数,而 call() 和 bind() 方法则可接收多个参数. apply() 方法向目标函数

  • JavaScript axios安装与封装案例详解

    1.下载axios插件 cnpm install axios -S 2.在main.js引入axios import axios from 'axios' Vue.prototype.$http = axios 3.创建axios实例 let service = axios.create({ baseURL: baseUrl, // url = base api url + request url withCredentials: true, // send cookies when cross

  • JavaScript es6中var、let以及const三者区别案例详解

    首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?         ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展.         2011 年,ECMAScript 5.1 版发布.之前我们大部分人用的也就是ES5         2015 年 6 月,ECM

  • JavaScript 拖拉时间之drag案例详解

    目录 DragEvent 接口 DataTransfer 接口概述 DataTransfer 的实例属性 DataTransfer.dropEffect DataTransfer.effectAllowed DataTransfer.files DataTransfer.types DataTransfer.items DataTransfer 的实例方法 DataTransfer.setData() DataTransfer.getData() DataTransfer.clearData()

  • JavaScript 上传文件限制参数案例详解

    项目场景: 1,上传文件限制 功能作用: 1,防止前端操作上传异常文件 2,限制符合的规则,优化展示模型 功能实现: 1,获取file实例 2,执行校验规则方法 代码如下: //大小限制 checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size / 1024 / 1024 > rules ? reject() : resolve() }).then( () => { return tr

随机推荐