HTMLElement.offsetParent（offsetLeft和offsetTop参照offsetParent的内边距边界）

最新推荐文章于 2022-03-13 16:46:23 发布

战南城

最新推荐文章于 2022-03-13 16:46:23 发布

阅读量311

点赞数

分类专栏：个人笔记，不喜勿喷！！

本文链接：https://blog.csdn.net/qq_29948297/article/details/108354710

版权

个人笔记，不喜勿喷！！专栏收录该内容

329 篇文章 2 订阅

订阅专栏

IE7以上（不是火狐）：

　　父级没有定位：

　　　　本身没有定位：

　　　　　　==> offsetParent:body

　　　　本身定位为：absolute/relative:

　　　　　　==> offsetParent:body

　　父级有定位:

　　　　本身没有定位:

　　　　　　==> offsetParent:定位父级

　　　　本身定位为：absolute/relative:

　　　　　　==> offsetParent:定位父级

　　　　本身定位为: fixed

　　　　　　==> offsetParent: null

火狐

　　父级没有定位：

　　　　本身没有定位:

　　　　　　==> offsetParent:body

　　　　本身定位为: absolute/relative:

　　　　　　==> offsetParent:body

　　　　本身定位为:fixed

　　　　　　==> offsetParent:body

　　父级有定位：

　　　　本身没有定位:

　　　　　　==> offsetParent:定位父级

　　　　本身定位为: absolute/relative:

　　　　　　==> offsetParent:定位父级

　　　　本身定位为:fixed

　　　　　　==> offsetParent:body

IE7以下：

　　父级没有定位：

　　　　本身没有定位：

　　　　　　==>offsetParent:body

　　　　本身定位为absolute/relative

　　　　　　==>offsetParent:body

　　　　本身定位为fixd

　　　　　　==>offsetParent:null

　　　父级有定位：

　　　　本身没有定位：

　　　　　　==>offsetParent:定位父级

　　　　本身定位为absolute/relative

　　　　　　==>offsetParent:定位父级

　　　　本身定位为fixd

　　　　　　==>offsetParent:null

总结:

　　offsetParent有点类似CSS中的包含块的概念

　　offsetLeft，offsetTop 都是参照于offsetParent的内边距边界

　　offsetParent( 前提条件：body和html之间的margin被清掉 )

　　本身定位为fixed：

　　　　==> offsetParent: null( IE7以上（不是火狐） )

　　　　==> offsetParent:body(火狐浏览器)

　　本身定位不为fixed：

　　　　父级没有定位：

　　　　　　==> offsetParent：body

　　　　父级有定位：

　　　　　　==> offsetParent:定位父级

haslayout

　　IE7以下，如果当前元素的某个父级触发了haslayout，

　　　　那么offsetParent就会指向到这个layout特性的父结点上

拓展：

offsetWidth,offsetHeight ==> border-box

　　clientWidth,clientHeight ==> padding-box

　　js的兼容性问题：

　　　　ev || event

　　　　offsetParent

　　　　事件绑定（事件流的机制，事件委托）

　　　　鼠标滚轮事件：

　　　　　　非火狐：onmousewhell(dom0)

　　　　　　　　ev.whellDelta

　　　　　　　　　　上：正，下:负

　　　　　　火狐:DOMouseScroll(dom2)

　　　　　　　　ev.detail

　　　　　　　　　　上：负，下：正

　　　　　　怎么取消事件的默认行为：

　　　　　　　　dom0:return false

　　　　　　　　dom2:ev.preventDefault()

　　绝对位置：

　　　　到body的距离(html和body之间的margin被清除)

　　　　　　原生实现：while循环不断地累加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>苹果导航菜单</title>
    <style type="text/css">
		*{
			padding: 0;
			margin: 0;   
		}
					
		body,html{
            height: 100%;
			overflow: hidden;
        }
        #div1{
            width: 100%;
            position: absolute;
            bottom: 0;
			left: 0;
            text-align: center;
        }
        #div1> img {
			/* width: 64px;
			height: 64px; */
			border-radius: 50%;
        }
    </style>
 <script type="text/javascript">
        window.οnlοad=function(){
            var r = 200;
			var obj = document.getElementById('div1');
			var imgNodes = document.getElementsByTagName('img');
		    document.onmousemove = function(ev){
			    ev = ev || event;
			    for(var i=0;i<imgNodes.length;i++){
				   var a = imgNodes[i].offsetLeft + imgNodes[i].offsetWidth / 2 -ev.clientX;
				   var b = imgNodes[i].offsetTop+ obj.offsetTop+ imgNodes[i].offsetHeight / 2 - ev.clientY;
				   var c = Math.sqrt(a*a+b*b);
				   // var scale = 1 - c / 320;
				   // if(scale<0.5){
					  //  scale = 0.5;
				   // }
				   // imgNodes[i].width = scale*128;
				   // imgNodes[i].height = scale*128;
				   if(c >= r){
					   c = r;
				   }
					imgNodes[i].style.width = 200 - c * 0.6 +"px";
					imgNodes[i].style.height = 200 - c * 0.6+"px";
			   }
		   }
        }
    </script>
	<!-- <script src="js/myjs.js"></script> -->
</head>
<body>
     <div id="div1">
        <img src="img/1.jpg" width="80" height="80">
        <img src="img/2.jpg" width="80" height="80">
        <img src="img/3.jpg" width="80" height="80">
        <img src="img/4.webp" width="80" height="80">
        <img src="img/5.jpg" width="80" height="80">
     </div>
</body>
</html>

　　　　　　　　body的offsetParent==>null

　　　　　　　　body的offsetLeft==>0

　　　　　　　　body的offsetTop==>0

　　　　　　　原生实现的缺点：没有办法兼容border和margin

　　　相对位置：

　　　　原生实现：

　　　　　　绝对位置的实现上减去滚动条滚动的距离

　　　　　　　　document.documentElement.scrollLeft || document.body.scrollLeft;(不同浏览器滚动条的父级不一样)

　　　　　　原生实现的缺点：没办法兼容border和margin

　　　　getBoundingClientRect（兼容性极好）

　　　　返回值：对象

　　　　　　{

　　　　　　width:boder-box 的宽

　　　　　　height:boder-box的高

　　　　　　// 元素border-box的左上角的相对位置

　　　　　　top:y,

　　　　　　left:x,

　　　　　　//元素border-box的右下角的相对位置

　　　　　　bottom:

　　　　　　right:

　　　　　　}

　　　　offsetWidth/Height，（可视区域）+border 即 border-box

　　　　clientWidth/Height, (可视区域即padding-box)

　　　　获取视口的宽度：

　　　　document.documentElement.clientWidth

注意：

　　window.onload = function(){

　　　　//根标签的clientWidth（document.documentElement.clientWidth）并不是可视区域的宽度，而是视口的宽度
               var w = document.documentElement.clientWidth;
               var w2 = document.documentElement.offsetWidth;
               console.log(w,w2);
           }

　　在IE10及IE10以下，根标签的 clientWidth 和 offsetWidth 统一被指定为视口的宽度。

战南城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTMLElement.offsetParent（offsetLeft和offsetTop参照offsetParent的内边距边界）

IE7以上（不是火狐）：　　父级没有定位：　　　　本身没有定位：　　　　　　==> offsetParent:body　　　　本身定位为：absolute/relative:　　　　　　==> offsetParent:body　　　　父级有定位:　　　　本身没有定位:　　　　　　==> offsetParent:定位父级　　　　本身定位为：abs...
复制链接

扫一扫