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>
  • 相关阅读:
    数据库字段太多，批量快速建立实体类方法（适合大量字段建立实体类）
    SQL service 中的 ”输入SQL命令窗口“ 打开了 “属性界面” 回到 ”输入SQL命令窗口“
    计算机软件编程英语词汇集锦
    编程常用英语词汇
    svn上传和下载项目
    当启动tomcat时出现tomcat setting should be set in tomcat preference page
    Implicit super constructor Object() is undefined for default constructor. Must define an explicit constructor
    eclipse中选中一个单词 其他相同的也被选中 怎么设置
    Spring Boot的@SpringBootApplication无法引入的问题
    最全的SpringCloud视频教程
  • 原文地址：https://www.cnblogs.com/pyliuwei/p/13490213.html
Copyright © 2011-2022 走看看