其他样式的操作属性

		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#dv1{
				width: 200px;
				height: 200px;
				background-color: deeppink;
				/* 边框 10像素 实线 黄色*/
				border:10px solid yellow;
				/* 内边距 上下左右 都为10像素 */
				padding:10px; 
				/* 外边距 上下左右 都为10像素 */
				/* margin: 22px; */
			}
			#dv2{
				width: 50px;
				height: 50px;
				background-color: cyan;
			}
		</style>

		<script type="text/javascript">
			window.onload = function(){
				var btn01 = document.getElementById("btn01")
				var dv1 = document.getElementById("dv1")
				
				btn01.onclick = function(){
					/* 
					 1- 获取到元素的宽高时 值得类型是Number 不带px 可以直接进行运算
					 2- 获取元素的宽度和高度，包含内容与内边距
					 3- 获取的都是可见的宽高
					 4- 属性是不能进行修改的
					 */
					// var height = dv1.clientHeight
					// var width = dv1.clientWidth
					// console.log(height,width)
					
					/* 
						1- 获取元素的宽度与高度,包含内容,边框,内边距
					 */
					// var height = dv1.offsetHeight
					// var width = dv1.offsetWidth
					// console.log(height,width)
					
					// var parent = dv1.offsetParent
					// console.log(parent)
					
					// var parent = dv2.offsetParent
					// console.log(parent)
					// console.log(parent.id)
					
					// // 获取当前元素的水平偏移量
					// var left = dv1.offsetLeft
					// // 获取当前元素的垂直偏移量
					// var top = dv1.offsetTop
					// console.log(left,top)
					
					/* 
					 
					获取的是当前元素的滚动区域 的宽度与高度
					 */
					// var height = dv2.scrollHeight
					// var width = dv2.scrollWidth
					// console.log(width,height)
					
					// 获取当前元素水平方向的滚动区域
					var left = dv1.scrollLeft
					// 获取当前元素垂直方向的滚动区域
					var top = dv1.scrollTop
					console.log(top,left)
					
				}
				
				var left = dv1.scrollLeft
				var top = dv1.scrollTop
				console.log(top,left)
			}
			
		</script>
		<div id="dv1">
			<div id="dv2"></div>
		</div>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<button id="btn01">按钮</button>