前端---js（自学笔记23)（其他样式的相关属性）

你的名字 2022-11-29 00:52 216阅读 0赞

### 练习测试代码：  ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>其他样式相关属性</title>
    		<style type="text/css">
    			#box{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				border: 10px solid blueviolet;
    			}
    			
    			#box4{
    				width: 100px;
    				height: 300px;
    				background-color: yellow;
    				overflow: auto;
    			}
    			#box5{
    				width:500px;
    				height: 400px;
    				background-color: pink;
    				
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function(){
    				var box =document.getElementById('box')
    				var box4 =document.getElementById('box4')
    				var btn =document.getElementById('btn')
    				btn.onclick = function(){
    					/**
    					 * clientWidth
    					 * clientHeight
    					 * -这俩个属性可以获取元素的可见宽度和高度
    					 * -这些属性都不带px的，返回都是一个数字，可以直接进行计算
    					 * 会获取元素宽度和高度，包括内边距和内容区
    					 * 这些属性是只读的，不可以修改
    					 * **/
    					//alert(box.clientWidth)
    					
    					/**
    					 * offsetWidth
    					 * offsetHeight
    					 * -获取元素的整个的宽度和高度，包括内容区、内边距和边缘
    					 * 
    					 * **/
    					//alert(box.offsetHeight)
    					/**
    					 * offsetParent
    					 * -可以用来获取当前元素的定位父元素
    					 * -会获取到离当前元素最近的开启了定位的祖先元素
    					 * 
    					 * 如果所有的祖先元素都没开启定位，则返归body
    					 * **/
    					var op = box.offsetParent;
    					//alert(op.id)
    					/**
    					 * offsetLeft
    					 * -当前元素相对于其定位父元素的水平偏移量
    					 * offsetTop
    					 * -当前元素相对于其定位父元素的垂直偏移量
    					 * **/
    //					alert(box.offsetLeft);
    					/**
    					 * scrollWidth
    					 * scrollHeight
    					 * -可以获取元素整个滚动区域的高度和宽度
    					 * **/
    					//alert(box4.scrollHeight)
    					/**
    					 * scrollLeft
    					 * -可以获取水平滚动条滚动的距离
    					 * scrollTop
    					 * -可以获取垂直滚动条滚动的距离
    					 * **/
    					//alert(box4.scrollTop)
    					
    //					alert(box4.clientHeight) ---283
    //当满足scrollHeight -scrollTop ==clientHeight
    //说明垂直滚动条滚动到底了
    //当满足scrollWidth -scrollLeft ==clientWidth
    //说明水平滚动条滚动到底了
    					alert(box4.scrollHeight -box4.scrollTop)  //400
    				}
    			}
    		</script>
    	</head>
    	<body id="ii">
    		<button id="btn">点击</button>
    		<div id="box4">
    			<div id="box5"></div>
    		</div>
    		<br />
    		<br />
    		<br />
    		
    		<div id="box"></div>
    	</body>
    </html>

### 小练习： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#info{
    				width: 300px;
    				height: 500px;
    				background-color: cornflowerblue;
    				overflow: auto;
    		</style>
    		<script type="text/javascript">
    			window.onload =function(){
    				/**
    				 * 当垂直滚动条滚动到底时使表单项可用
    				 * onscroll
    				 * -该事件会在元素的滚动条滚动时触发
    				 * **/
    				//获取id为info的p元素
    				var info =document.getElementById("info");
    				//获取俩个表单项
    				var inputs =document.getElementsByTagName("input")
    				//为info绑定一个滚动条滚动事件
    				info.onscroll =function(){
    					//检查垂直滚动条是否滚动到底
    					if(info.scrollHeight-info.scrollTop==info.clientHeight){
    						//滚动条滚动到底，使表单项可用
    						/**
    						 *disabled属性可以设置一个元素是否 禁用
    						 * 如果设置为true，则元素禁用
    						 * 如果设置为false，则元素可用
    						 * **/
    						inputs[0].disabled =false;
    						inputs[1].disabled =false;
    					}
    					
    				}
    				
    			}
    		</script>
    	</head>
    	<body>
    		<h3>欢迎亲爱的用户注册</h3>
    		<p id="info">看完协议，在注册，看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册
    		看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册
    		看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册
    		看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册
    		看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册
    		看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册
    		看完协议，在注册看完协议，在注册看完协议，在注册看完协议，在注册</p>
    		
    		<input type="checkbox" disabled="disabled"/>我已经仔细阅读协议，一定遵守
    		<input type="submit" value="注册" disabled="disabled"/>
    	</body>
    </html>

![20200818180314450.gif][]

[20200818180314450.gif]: /images/20221124/c186a1e60053464984c4f47f1d95f71c.png