offsetLeft在各浏览器的值

上网找了好久没有找到一个offsetLeft在各浏览器的值,自己用了一晚上的时间在各浏览器测试出来的offsetLeft的值。


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>offsetLeft和offsetTop</title>
	<style>
	*{
		margin: 0px;
		padding: 0px;
	}
	body{
		width: 500px;
		height: 200px;
		padding: 25px;
		margin: 32px;
		border: 51px solid yellow;
		background: pink;
		/* position: absolute; */

		/* 108*/
	}
	#pppd1{
		width: 1000px;
		padding: 1px;
		margin: 3px;
		border: 4px solid yellow;
		position: absolute;

		/* 8 */
	}
	#ppd1{
		width: 1000px;
		padding: 11px;
		margin: 3px;
		border: 4px solid yellow;

		/* 18 */
	}
	#pd1{
		width: 10px;
		height: 100px;
		padding: 1px;
		margin: 3px;
		border: 6px solid yellow;
		background: pink;
		/* 10 */
	}
	#d1{
		width: 100px;
		height: 200px;
		padding: 20px;
		margin: 30px;
		border: 40px solid skyblue;
		background: pink;
	}
</style>
</head>
<body>
	<div id="pppd1">
	<div id="ppd1">
	<div id="pd1">
		<div id="d1"></div>
	</div>
	</div>
	</div>
</body>
</html>
<script>
	var d1 = document.getElementById('d1');	
	console.log(d1.offsetLeft);
</script>
<!-- 
ie 6/7 () 无论父级怎么改变offset永远不变
offsetLeft = (父padding-left)+(当margin-left)
---------------------------------------------------------------------------------

父级没有定位且父级是body时
firefox
offsetLeft = (父padding-left)+(父margin-left)+(当margin-left)

ie8/9/10/11 chrome
offsetLeft = (父padding-left)+(父margin-left)+(父border-left)+(当margin-left)



---------------------------------------------------------------------------------
父级没有定位且父级有多层时
ie8/9/10/11 chrome (所有父,包括body)
offsetLeft = (所有父padding-left)+(所有父margin-left)+(所有父border-left)+(当margin-left)

firefox  (所有父,不包括body)
offsetLeft = (所有父padding-left)+(所有父margin-left)+(所有父border-left)+(当margin-left)+ (body的padding-left)+(body的margin-left)


--------------------------------------------------------------------------------------
父级有定位且定位不是在body
ie8/9/10/11 chrome 和firefox 
向上取父级,把所有父级元素的padding-left、margin-left、border-left相加,直到的遇到定位时,把定位元素的padding-left相加,最后加上自身元素的margin-left
offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(当padding-left)
----------------------------------------------------------------------------------------
父级有定位且定位是了在body
 chrome  
向上取父级,把所有父级元素的padding-left、margin-left、border-left相加,直到的遇到body定位时,把body定位元素的padding-left和border-left相加,最后加上自身元素的margin-left
offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(有定位父border-left)+(当padding-left)

ie8/9/10/11 和firefox  这个和定位不是在body时是一样的
向上取父级,把所有父级元素的padding-left、margin-left、border-left相加,直到的遇到body定位时,把body定位元素的padding-left和border-left相加,最后加上自身元素的margin-lef
offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(当padding-left)

----------------------------------------------------------------------------------------
1级父级有定位且定位不是body
在chrome和firefox下,ie还没有测试
offsetLeft =(当margin-left);
所以可以用这个属性去写滑动的效果
 -->

posted @ 2018-10-23 22:48  十年后2028  阅读(341)  评论(0编辑  收藏  举报