Javascript其他样式操作的属性

最新推荐文章于 2022-06-29 11:43:01 发布

前端程序员路易

最新推荐文章于 2022-06-29 11:43:01 发布

阅读量74

点赞数 1

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_46582421/article/details/121844563

版权

javascript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>06_其他样式操作的属性</title>
		<style type="text/css">
			#box1{
				width:100px;
				height:100px;
				background-color:red;
				padding:10px;
				border: 10px solid yellow;
			}
			
			#box2{
				padding:100px;
				background-color:#bfa;
			}
			
			#box4{
				width: 200px;
				height: 300px;
				background-color: #bfa;
				overflow: auto;
			}
			
			#box5{
				width: 450px;
				height: 600px;
				background-color: yellow;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				
				btn01.onclick = function(){
					/*
					clientWidt h
					clientHeight
					  - 这两个属性可以获取元素的可见宽度和高度
					  - 这些属性都是不带px的，返回都是一个数字， 可以直接进行计算
					  - 会获取元素宽度和高度，包括内容区和内边距
					  - 这些属性都是只读的，不能修改

					*/
				   // alert(box1.clientWidth);
				   // alert(box1.clientHeight);
				   // box1.clientHeight = 300;
				   
				   /*
				   offsetWidth
				   offsetHeight
				    - 获取元素的整个的宽度和高度，包括内容区、内边距和边框
				   */
				   // alert(box1.offsetWidth);
				   
				   /*
				   offset Parent
				    - 可以用来获取当前元素的定位父元素
					- 会获取到离当前元素最近的开启了定位的祖先元素
					- 如果所有的祖先元素都没有开启定位，则返回body
				   */
				  var op = box1.offsetParent;
				  
				  // alert(op.id);
				  
				  /*
				  offsetLeft
				  - 当前元素相对于其定位父元素的水平偏移量
				  offsetTop
				  - 当前元素相对于其定位父元素的垂直偏移量
				  */
				  // alert(box1.offsetLeft);
				  
				  /*
				  scrollWidth
				  scrollHeight
				   - 可以获取元素整个滚动区域的宽度和高度
				  */
				  // alert(box4.clientHeight);
				  // alert(box4.clientWidth);
				  
				  /*
				  scrollleft
				   - 可以获取水平滚动条滚动的距离
				  scrollTop
				   - 可以获取垂直滚动条滚动的距离
				  */
				  // alert(box4.scrollleft);
				  // alert(box4.scrollTop);
				  
				  
				//   当满足scrollHeight - scrol1Top = clientHeight
				//   说明垂直滚动条滚动到底了
				
				//   当满足scrollWidth - scrollLeft == clientWidth
				//   说明水平滚动条滚动到底
				  //alert(box4. scrollHeight - box4. scrollTop);

				  
				};
			};
		</script>
	</head>
	<body>
		<button id="btn01">点击</button>
		<br /><br />
		
		<div id="box4">
			<div id="box5"></div>
		</div>
		<br /><br />
		
		<div id="box3" style="position:relative;">
			<div id="box2" style="position:relative;">
				<div id="box1"></div>
			</div>
		</div>
	</body>
</html>