♫【JS】offsetParent

时间：2022-07-01 09:14:31

♫【JS】offsetParent

This property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".

This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <style>

        *{margin:0;padding:0}

        div{width:50%;padding:20px;border:5px solid green}

        #box1{position:relative}

        #box4{position:absolute;display:none;border-color:red}

    </style>

    <div id="box1">

        <div id="box2">

            <div id="box3">

                <div id="box4"></div>

            </div>

        </div>

    </div>

    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>

    <script>

        var $box3 = $('#box3')

        var $box4 = $('#box4')

        $box4.css({visibility:'hidden',display:'block'})

        var $box = $box4.offsetParent()

        // or

        var $box = $(document.getElementById('box4').offsetParent)

        $box4.css({visibility:'',display:'none'})

        var offset1 = $box3.offset()

        var offset2 = $box.offset()

        $box4.css({

            top: offset1.top + $box4.outerHeight() - parseInt($box.css('border-top-width'), 10) - offset2.top,

            left: offset1.left - parseInt($box.css('border-left-width'), 10) - offset2.left,

            display: 'block'

        })

    </script>

</body>

</html>

♫【JS】offsetParent的更多相关文章

  1. 【js】appendChild

    appendChild主要是用来追加节点插入到最后:循环的时候由于不停的搬家导致length在改变.     使用for循环 <!Doctype html> <html xmlns= ...

  2. 【JS】AJAX跨域-被调用方与调用方解决方案（二）

    解决跨域问题 跨域问题说明,参考[JS]AJAX跨域-JSONP解决方案(一) 实例,使用上一章([JS]AJAX跨域-JSONP解决方案(一))的实例 解决方案三(被调用方支持跨域-服务端代码解决) ...

  3. 【js】Leetcode每日一题-制作m束花所需的最少天数

    [js]Leetcode每日一题-制作m束花所需的最少天数 [题目描述] 给你一个整数数组 bloomDay,以及两个整数 m 和 k . 现需要制作 m 束花.制作花束时,需要使用花园中 相邻的 k ...

  4. 【js】Leetcode每日一题-完成所有工作的最短时间

    [js]Leetcode每日一题-完成所有工作的最短时间 [题目描述] 给你一个整数数组 jobs ,其中 jobs[i] 是完成第 i 项工作要花费的时间. 请你将这些工作分配给 k 位工人.所有工 ...

  5. 【js】Leetcode每日一题-数组异或操作

    [js]Leetcode每日一题-数组异或操作 [题目描述] 给你两个整数,n 和 start . 数组 nums 定义为:nums[i] = start + 2*i(下标从 0 开始)且 n == ...

  6. 【js】Leetcode每日一题-解码异或后数组

    [js]Leetcode每日一题-解码异或后数组 [题目描述] 未知 整数数组 arr 由 n 个非负整数组成. 经编码后变为长度为 n - 1 的另一个整数数组 encoded ,其中 encode ...

  7. 【js】Leetcode每日一题-叶子相似的树

    [js]Leetcode每日一题-叶子相似的树 [题目描述] 请考虑一棵二叉树上所有的叶子,这些叶子的值按从左到右的顺序排列形成一个 叶值序列 . 举个例子,如上图所示,给定一棵叶值序列为 (6, 7 ...

  8. 【js】Leetcode每日一题-子数组异或查询

    [js]Leetcode每日一题-子数组异或查询 [题目描述] 有一个正整数数组 arr,现给你一个对应的查询数组 queries,其中 queries[i] = [Li, Ri]. 对于每个查询 i ...

  9. 【js】Leetcode每日一题-停在原地的方案数

    [js]Leetcode每日一题-停在原地的方案数 [题目描述] 有一个长度为 arrLen 的数组,开始有一个指针在索引 0 处. 每一步操作中,你可以将指针向左或向右移动 1 步,或者停在原地(指 ...

随机推荐

  1. Hello Point——WebGL

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. JavaBean 的小知识点

    /** * @author http://roucheng.cnblogs.com * @version 2016-05-08 */ public class Person { private Str ...

  3. iOS处理XMl提供GDataXMLNode下载的链接

    GDataXMLNode .好东西,处理xml 在iOS 中使用.可以编辑和读取Xml文档.支持Xpath.这个很好. GDataXMLNode.h GDataXMLNode.m 文件很不好找啊. / ...

  4. &lbrack;转&rsqb; 条件变量&lpar;Condition Variable&rpar;详解

    http://www.wuzesheng.com/?p=1668 条件变量(Condtion Variable)是在多线程程序中用来实现“等待->唤醒”逻辑常用的方法.举个简单的例子,应用程序A ...

  5. C&plus;&plus; 初读迭代器

    迭代器 这是个啥? string对象或vector对象可以通过下标访问每一个元素,迭代器也具有同样的效果.那又有什么不同呢?事实上并不是所有的容器到可以使用下标访问每一个元素,即在容器上迭代器更具普适 ...

  6. &lbrack;Go&rsqb; 开始试探一门新语言的五点思考 - Golang

    1.如果在其他语言环境中写的代码很烂,那么换一门语言很可能情况更糟,因为是涉及到基本功.工程能力和心思逻辑. 2.一定要了解语言解决的问题(比如:多核并发机制性能高.省机器.简洁易学.资料少),优势是 ...

  7. 同机器与不同机器redis集群

    此文为另外一位大神原创由于没有找到分享功能  粘贴复制到此  原地址为https://blog.csdn.net/u012042021/article/details/72818759 一.同机器下的 ...

  8. day 28 面向对象 三种特性之一 多态 鸭子类型 反射（反省）

    多态是OOP的三大特征之一 字面意思:多种形态 多种状态 官方描述:不同的对象可以响应(调用)同一个方法 产生不同的结果(例如水的三相特征) 多态不是什么新技术 我们编写面向对象的程序时 其实就有多态 ...

  9. mysql之event

    mysql之event http://blog.csdn.net/lxgwm2008/article/details/9088521 Mysql事件调度器(Event Scheduler)类似于定时器 ...

  10. OD基本汇编指令

    jmp ;无条件跳转 指哪飞哪 一些杂志中说的直飞光明顶,指的就是它了~ 光明顶一般指爆破地址根据条件跳转的指令:JE ;等于则跳转 JNE ;不等于则跳转 JZ ;为 0 则跳转   JNZ ;不为 ...

相关文章