zoukankan      html  css  js  c++  java

  • JavaScript offset、client、scroll家族

    offsetParent

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- offset demension 偏移量
		定位父级 offsetParent 如果没有定位 找body
		offsetLeft offsetTop
		offsetHeight offsetWidht
		-->
	
		<div id="box" style="position:fixed;"></div>
		<script type="text/javascript">
			//元素自身有fixed定位，offsetParent是null
			var box = document.getElementById("box");
			console.log(box.offsetParent);
			
		</script>
		
	</body>
</html>


    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- offset demension 偏移量
		定位父级 offsetParent 如果没有定位 找body
		offsetLeft offsetTop
		offsetHeight offsetWidht
		-->
	
		<div id="box"></div>
		<script type="text/javascript">
			//元素自身五fixed定位，offsetParent是<body>
			
			var box = document.getElementById("box");
			console.log(box.offsetParent);	
		</script>
		
	</body>
</html>


    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- offset demension 偏移量
		定位父级 offsetParent 如果没有定位 找body
		offsetLeft offsetTop
		offsetHeight offsetWidht
		-->
		>
	
		<div id="box"></div>
		<script type="text/javascript">
			//元素自身五fixed定位，offsetParent是<body>
			
			var box = document.getElementById("box");
			console.log(box.offsetParent);	
		</script>
		
	</body>
</html>

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- offset demension 偏移量
		定位父级 offsetParent 如果没有定位 找body
		offsetLeft offsetTopfsetHeight offsetWidht
		-->
		<div id="grandfather" style="position: relative;">
			<div id="father">
				<div id="box"></div>
			</div>
			
		</div>
	
		
		<script type="text/javascript">
			//元素自身无定位，父级元素存在定位，offsetParent 是以最近的经过定位的父级元素。
			var box = document.getElementById("box");
			console.log(box.offsetParent);	
			
		</script>
		
	</body>
</html>


    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- offset demension 偏移量
		定位父级 offsetParent 如果没有定位 找body
		offsetLeft offsetTopfsetHeight offsetWidht
		-->
		<div id="grandfather" style="position: relative;">
			<div id="father">
				<div id="box"></div>
			</div>
			
		</div>
	
		
		<script type="text/javascript">
			//body元素的offsetParent是null
			console.log(document.body.offsetParent);
			
	
		</script>
		
	</body>
</html>

    offsetParent定义：与当前元素最近的经过定位的父级元素

    offsetwidth和offsetHeight用法

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				 200px;
				height: 200px;
				border: 1px solid #000;
				background-color: red;
				padding-left: 10px;
				padding-right: 20px;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div id="box" style="100px;height:200px;">
			
		</div>
		<script type="text/javascript">
			//offsetWidth = width + border-left-width + border-right-width-padding-left-width+broder-left-width-pading-right-width
			//offsetHeight = height+ border-left-height+border-right-width-paading-left-height+border-left-width-padding-right-height
			var box = document.getElementById("box");
			console.log(box.offsetWidth,box.offsetHeight);
			//这种方法只能得到行内元素的数据
			console.log(box.style.width,box.style.height);
			//因为offsetwidth和offsetHeight  它们是只读属性
			//box.offsetWidth=500
			我们在计算的时候尽量使用offsetWidth和offsetHeight，在进行元素属性更改的时候使用标签元素.style，但是不要忘记style这个方法只能用于行内。
			box.style.width = 500 +'px';
		</script>
		
	</body>
</html>

    offsetTop和offsetLeft用法

    <!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			padding:0;
			margin: 0;
		}
		#father{
			 400px;
			height: 400px;
			background-color: red;
			position: relative;
		}
		#son{
			 200px;
			height: 100px;
			background-color: #0000FF;
		}
	</style>
</head>
<body>
	
	<div id="father">
		<div id="son"></div>
	</div>
	<script type="text/javascript">
		//1.offsetTop 找的是当前元素的上边框到offersetParent上边框的距离
		//2.offsetLeft 找的是当前元素的左边框到offsetParent元素的左边框的距离
		
		var son = document.getElementById("son");
		//如果有父元素定位
		console.log(son.offsetParent);
		console.log(son.offsetTop,son.offsetLeft);//0 20
		//如果没有父元素定位
		console.log(son.offsetParent);
		console.log(son.offsetTop,son.offsetLeft);//40  60
		//相对于父元素（看父元素是否有定位，如果有定位，以父元素为基准去定位，如果没有则往上寻找，如果一直找不到，以body为准。）的上边距和下边距。
	</script>
</body>
</html>

    求出当前元素在页面上的左偏移量

    <!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			padding:0;
			margin: 0;
		}
		#father{
			 400px;
			height: 400px;
			background-color: red;
			margin: 40px;
			border: 5px solid #000;
			position: relative;
		}
		#son{
			 200px;
			height: 100px;
			background-color: #0000FF;
		}
	</style>
</head>
<body>
	
	<div id="father">
		<div id="son"></div>
	</div>
	<script type="text/javascript">
		//1.offsetTop 找的是当前元素的上边框到offersetParent上边框的距离
		//2.offsetLeft 找的是当前元素的左边框到offsetParent元素的左边框的距离
		
		var son = document.getElementById("son");
			console.log(getElementLeft(son));
		function getElementLeft(obj){
			//获取当前元素的左方偏移量
			var actualeft = obj.offsetLeft;
			//求出定位父级
			var parent = obj.offsetParent;
			//循环
			while(parent !=null){
				//3.1 求出当前的左方偏移量
				actualeft + parent.clientLeft + parent.offsetLeft;
				//3.2 更新定位父级
				parent = parent.offsetParent;
				console.log(parent);
			}
			return actualeft;
		}
	</script>
</body>
</html>

    求出当前元素在页面上的左偏移量

    <!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			padding:0;
			margin: 0;
		}
		#father{
			 400px;
			height: 400px;
			background-color: red;
			margin: 40px;
			border: 5px solid #000;
			position: relative;
		}
		#son{
			 200px;
			height: 100px;
			background-color: #0000FF;
		}
	</style>
</head>
<body>
	
	<div id="father">
		<div id="son"></div>
	</div>
	<script type="text/javascript">
		//1.offsetTop 找的是当前元素的上边框到offersetParent上边框的距离
		//2.offsetLeft 找的是当前元素的左边框到offsetParent元素的左边框的距离
		
		var son = document.getElementById("son");
			console.log(getElementTop(son));
		function getElementTop(obj){
			//获取当前元素的左方偏移量
			var actualTop = obj.offsetTop;
			//求出定位父级
			var parent = obj.offsetParent;
			//循环
			while(parent !=null){
				//3.1 求出当前的左方偏移量
				actualTop = actualTop + parent.offsetTop + parent.offsetTop;
				//3.2 更新定位父级
				parent = parent.offsetParent;
				console.log(parent);
			}
			return actualTop;
		}
	</script>
</body>
</html>

    client家族

    <!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<div id="box" style=" 200px;height: 200px;border: 1px solid red;"></div>
	<script type="text/javascript">
		//client 客户端大小:指的是元素内容到内边距占据的空间大小。
		//不包含border
		//1.cilentWidth = width+padding-left+padding-right
		//2.clientHeight = height+padding-top+padding-bottom
		//3.clientLeft  左边框的大小
		//4.clientTop 上边框的大小
		var box = document.getElementById("box");
		console.log(box.clientWidth,box.clientHeight);
		console.log(box.clientTop,box.clientLeft);
		//获取页面大小
		console.log(document.documentElement.clientWidth);
		console.log(document.documentElement.clientHeight);
		//所有的client属性是只读的
		//注意
		//静态失败
		box.clientHeight = 10;
		console.log(box.clientHeight);
		//如果给元素设置display:none;客户端client属性都为0
		//尽量避免重复访问这些元素
		console.time('time');
		var b = box.clientHeight;
		for (var i = 0; i < 1000000; i++){
			var a = b;
		}
		console.timeEnd("time",a);
		
	</script>
	
</body>
</html>

    scroll家族

    scrollHeight
    scrollWidth

    <!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			 100px;
			height: 100px;
			border: 1px solid #000000;
			padding:10px;
			margin: 10px;
			overflow: scroll;
		}
	</style>
</head>
<body>
		<div id="box">
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			</div>
		<script type="text/javascript">
			//1.scrollHeight 表示元素的总高度！包含由于溢出而无法在网页上的不可见部分
			//1.scrollWidth 表示元素的总高度！包含由于溢出而无法在网页上的不可见部分
			var box = document.getElementById("box");
			//无滚动条时！scrollHeight和scrollWidth属性结果是相等的。
			console.log(box.scrollHeight);
			console.log(box.scrollWidth);
		</script>
</body>
</html>

    scrollTop
    scrollLeft

    <!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			 100px;
			height: 100px;
			border: 1px solid #000000;
			padding:10px;
			margin: 10px;
			overflow: scroll;
		}
	</style>
</head>
<body>
		<div id="box">
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			</div>
		<script type="text/javascript">
			var box = document.getElementById("box");
			//无滚动条时！scrollHeight和scrollWidth属性结果是相等的。
			//console.log(box.scrollTop);
			box.onscroll = function(){
				console.log(box.scrollTop,box.scrollHeight)
			}
			box.scrollTop = 29;
			console.log(box.scrollTop);
		</script>
</body>
</html>

    scrollTop是可读写的。

    <!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			 100px;
			height: 100px;
			border: 1px solid #000000;
			padding:10px;
			margin: 10px;
			overflow: scroll;
		}
	</style>
</head>
<body>
		<div id="box">
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			</div>
			<button id="btn1"></button>
		<script type="text/javascript">
			var box = document.getElementById("box");
			var btn1 = document.getElementById("btn1");
			//无滚动条时！scrollHeight和scrollWidth属性结果是相等的。
			//console.log(box.scrollTop);
			box.onscroll = function(){
				console.log(box.scrollTop,box.scrollHeight)
				//当滚动条滚动到内容底部时，符合以下公式
				//scrollHeight = clientHeight+scrollTop;
				
			}
			//scrollTop是可读写的
			box.scrollTop = 29;
			btn1.onclick = function(){
				box.scrollTop += 10;
			}
			console.log(box.scrollTop);
		</script>
</body>
</html>

    页面滚动

    <!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			 100px;
			height: 100px;
			border: 1px solid #000000;
			padding 10px;
			overflow: scroll;
			magin:10px;
		}
	</style>
</head>
<body>
		<div id="box">
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
		</div>
		<button id="btn">回到顶部</button>
		<script type="text/javascript">
			window.onscroll = function(){
				//console.log(document.documentElement.scrollTop);
				console.log(document.body.scrollTop);
			}
			//兼容代码
			var docScrollTop = document.documentElement.docScrollTop || document.body.scrollTop;
			console.log(docScrollTop);
			var btn = document.getElementById("btn");
			btn.onclick = scrollTop;
			function scrollTop(){
				if(docScrollTop){
					//document.documentElement.scrollTop = 0;
					//document.body.scrollTop = 0;
					//简便写法
					document.documentElement.scrollTop = document.body.scrollTop = 0;
				
					
				}
			}
			
		</script>
</body>
</html>

    滚动方法

    <!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body style="height:2000px;">
	<button type="button" id="btn" style="position: fixed;">回到顶部</button>
	<script type="text/javascript">
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			window.scrollTo(0,100);
		}
	</script>
</body>
</html>
  • 相关阅读:
    被Play framework狠狠的play了一把
    ant导入Zookeeper到Eclipse错误path contains invalid character
    Hadoop2.4代码的坑
    uml类关系
    Hadoop 源码编译导出
    Eclipse 导入 Hadoop 源码
    js中的prototype和constructor
    react之路：使用redux-immutable
    react之路：使用actionCreators和constants
    react之路：使用combineReducers拆分reducer
  • 原文地址：https://www.cnblogs.com/pyliuwei/p/13490213.html
Copyright © 2011-2022 走看看