5offsetLeft,offsetParent,getBoundingClientRect

最新推荐文章于 2022-09-01 15:35:39 发布
最新推荐文章于 2022-09-01 15:35:39 发布
阅读量212 收藏
点赞数
分类专栏： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kasekale/article/details/78576450
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{padding:100px;}
        #div1{background-color: #FFF5EE;position:relative;}
        #div2{background-color: #F4F4F4;}
        #div3{background-color: #C1FFC1;position:relative;}
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">

            </div>
        </div>
    </div>
    <script>
        /*offsetParent  最近的有定位属性的祖先节点*/
        var div3 = document.getElementById("div3");
        console.log(div3.offsetParent);
        /*结果导向证明,div3的最近的有定位属性的祖先节点是body;
            当div1和div3都有定位的时候,div3的offsetParent是idv1
            如果祖先节点都没有定位,默认为body,子元素和父元素都有定位,而且其他浏览器为了兼容,div还要有宽高.
        */
    </script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        #div1{background-color: #FFF5EE;position:relative;width: 200px;height: 200px;left:30px;top:30px; border:3px solid #7D26CD;}
        #div2{background-color: #FF7F00;position:relative;width: 100px;height:100px;left:30px;top:30px; border:3px solid #7D26CD;}
        #div3{background-color: #C1FFC1;
            position:absolute;
            width: 50px;
            height: 50px;top:20px;
             border:3px solid #7D26CD;
             left:0;/*important*/
             transition:1s left;}
    </style>
</head>
<body>
    <input id = "btn" type="button" value = "点击移动">
    <div id="div1">
        <div id="div2">
            <div id="div3">

            </div>
        </div>
    </div>
    <script>
        /*offsetLeft  左外边框到最近的有定位父级的左内边框的距离*/
        /*offsetTop  上外边框到最近的有定位父级的上内边框的距离*/
        /*offsetRight offsetBottom 是没有的*/
        var div3 = document.getElementById("div3");
        console.log(div3.offsetParent);
        console.log(getComputedStyle(div3).left);/*20px*/
        console.log(div3.offsetLeft);
        console.log(div3.offsetTop);/*20*/
        /*如果子元素和父级元素都没有定位的话,offsetLeft是8px,取消margin和padding之后,是0px*/

        /*需求:当点击按钮的时候,div3移动到左顶边*/
        var btn = document.getElementById("btn");

        btn.onclick = function(){
            var left = 0;
            var elem = div3;
            var div3B = parseInt(getComputedStyle(div3).borderLeftWidth);
            while(elem){//如果有elem这个元素,就会走这个循环
                left+=elem.offsetLeft+parseInt(getComputedStyle(elem).borderLeftWidth);
                elem=elem.offsetParent;//第一次计算之后elem就会由div3变成div2

            }
            left -= div3B;
            div3.style.left=-left+"px";
            console.log(left);
        }


    </script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        #div1{background-color: #FFF5EE;position:relative;width: 200px;height: 200px;left:30px;top:30px; border:3px solid #7D26CD;}
        #div2{background-color: #FF7F00;position:relative;width: 100px;height:100px;left:30px;top:30px; border:3px solid #7D26CD;}
        #div3{background-color: #C1FFC1;
            position:absolute;
            width: 50px;
            height: 50px;top:20px;
             border:3px solid #7D26CD;
             left:0;/*important*/
             transition:1s left;}
    </style>
</head>
<body>
    <input id = "btn" type="button" value = "点击移动">
    <div id="div1">
        <div id="div2">
            <div id="div3">

            </div>
        </div>
    </div>
    <script>
        /*offsetLeft  左外边框到最近的有定位父级的左内边框的距离*/
        /*offsetTop  上外边框到最近的有定位父级的上内边框的距离*/
        /*offsetRight offsetBottom 是没有的*/
        var div3 = document.getElementById("div3");
        console.log(div3.offsetParent);
        console.log(getComputedStyle(div3).left);/*20px*/
        console.log(div3.offsetLeft);
        console.log(div3.offsetTop);/*20*/
        /*如果子元素和父级元素都没有定位的话,offsetLeft是8px,取消margin和padding之后,是0px*/

        /*需求:当点击按钮的时候,div3移动到左顶边*/
        var btn = document.getElementById("btn");

        btn.onclick = function(){

                div3.style.left=-div3.getBoundingClientRect().left+"px";
                /*
                    getBoundingVlientRect : 返回值为一个对象,获取某个元素的信息(高版本:left,right,top,bottom,width,height)
                    距离可视区屏幕的上下左右的距离.
                */

            }




    </script>
</body>
</html>
Kasekale
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
getBoundingClientRect计算页面元素的offsetLeft、offsetTop
百川异源，终归于海
04-09 5068
新做一个组件，在网站内使用很广泛，不想依赖任何框架，纯手工打造，结果发现以前常用的计算offsetLeft、offsetTop的函数有时候不好用了，算出的值不对。 网上很流行的方法，不用框架时，我就用这方法：function getOffsetPosition(element){ var posTop = 0, posLeft = 0; do { posTop += elem
getBoundingClientRect() 与 offset
aa_mmnn的博客
08-11 430
offset 的方向值需要考虑到父级，如果父级是定位元素，那么子元素的offset值相对于父元素，如果父元素不是定位元素，那么子元素的offset值相对于 可视区窗口。原文链接：https://blog.csdn.net/itSeven7/article/details/78855223。Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。right 方向的值是基于 元素右侧边框到可视区左边的距离。bottom方向的值是基于 元素底部到可视区顶部的距离。..
【html】获取元素的绝对定位&相对定位（getBoundingClientRect）
sylbiubiubiu的博客
09-01 1618
【html】获取元素的绝对定位&相对定位（getBoundingClientRect）
offsetParent、getBoundingClientRect与其他位置相关属性
wll_web的博客
04-13 444
写在前面：本文章中的代码演示，默认清除的了 body 和 html 的 margin、padding。 定位父级 Element.offsetParent。 定位父级 offsetParent 是一个只读属性。 该属性返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body 元素。 <div id="box1"> <div id="box2"> <div id="box3"></div>
javascript 获取元素位置的快速方法 getBoundingClientRect()
10-29
在这种情况下，开发者可能需要使用其他技术，比如`offsetParent`、`offsetTop`和`offsetLeft`属性来获取元素的位置，但这通常会更复杂，并且可能不那么准确。 在实际应用中，`getBoundingClientRect()`常用于创建...
获取offsetTop和offsetLeft值的js代码(兼容)
10-27
5. 当遍历到不再有offsetParent（例如body元素）时，循环结束。 6. 返回变量top，此时的top值为从元素到页面顶部的总距离。 同理，getOffsetLeft()函数与getOffsetTop()类似，只是累加的是元素的offsetLeft值。 这...
js模仿html5 placeholder适应于不支持的浏览器
10-27
left += obj.offsetLeft; top += obj.offsetTop; obj = obj.offsetParent; } } return{ left: left, top : top } }, ``` 这个方法用于获取输入框的绝对位置，以确保`label`能正确地显示在其上方。 然后是...
bootstrap 实现吸顶效果_5种滚动吸顶效果实现方式的比较
weixin_42134117的博客
01-17 1081
offsetTop用于获得当前元素到定位父级( element.offsetParent )顶部的距离(偏移值)。定位父级 offsetParent 的定义是：与当前元素最近的 position != static 的父级元素。或许写这个代码的人没有注意到“定位父级”这个这个附属条件。后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的 4 种滚动吸顶实现方式做详细介绍。目录使用 posi...
什么是回流与重绘 (Reflow & Repaint)
w候人兮猗
12-18 542
写在前面 在讨论今天的主角之前，我们要先了解一下浏览器的渲染机制。以Google,Firefox,Safari为例，Firefox 使用Geoko——Mozilla 自主研发的渲染引擎，Safari 和Chrome 都使用 webkit。 我们主要以 Webkit的主流程为例 浏览器使用流式布局模型 (Flow Based Layout) 解析HTML 生成 DOM 树 解析CSS 生成CSSOM 规则树 将 DOM 树与 CSSOM 规则树合并在一起生成渲染树Render Tree 根据渲染树遍历拿到每
offsetWidth,offsetHeigh, offsetLeft, offsetTop,getBoundingClientRect(),clientY,clientX的区别
qq_41442428的博客
01-16 735
e.clientY,e.clientX-----表示的是记录当前的坐标。
getBoundingClientRect().top与offsetTop有什么区别？
qq_29854831的博客
10-17 7237
Element.getBoundingClientRect() Element.offsetTop 差别大了，前者指元素（比如某个div）距离可视区域顶部的距离，后者包括滚动条卷起的部分。 js原生的offsetTop属性有很多浏览器兼容性问题，用时要慎重。...
clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft的测试Dome
xxb2008的专栏
06-17 8069
clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft的测试Dome               h4{margin-bottom: 2px;}     body{ margin: 0 auto; width: 1000px; height: 500px; p
基于微信小程序的在线学习系统设计与实现.docx
08-29
基于微信小程序的在线学习系统设计与实现.docx
mayaABC文件建模李小龙动作B
08-29
mayaABC文件建模李小龙动作A，一整套的建模abc数据有动作
微专题 新情景条件下氧化还原反应方程式的书写 (1).pdf
最新发布
08-29
微专题 新情景条件下氧化还原反应方程式的书写 (1).pdf
新增数字经济专利等20多份数字经济学术资源大合集(全新整理)
08-29
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141267034 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 数据指标说明 一、新经济指数（2017-2022） 二、数字经济发展白皮书2017-2021年 三、北京大学商业银行数字化转型指数（2010-2021年） 四-1 全国31省数字经济测算2013-2020 四-2 全国31省数字经济发展测算指标 五、 中国城市数字经济指数（2017-2021） 六、中国城市数字经济成分（2011-2019） 七、《2018-2020县域数字乡村指数》 八、企业级数字经济核心产业专利
offsetParent
05-10
`offsetParent` 属性常用于计算元素的绝对位置，例如通过 `offsetTop` 和 `offsetLeft` 属性。这些属性返回元素相对于其 `offsetParent` 元素的位置。如果该元素没有 `offsetParent`，则这些属性返回相对于文档的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值