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

最新推荐文章于 2024-07-30 14:25:18 发布

原创最新推荐文章于 2024-07-30 14:25:18 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javaScript 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了如何使用CSS设置元素样式，包括宽度、高度、背景颜色等，并通过JavaScript操作DOM元素，获取其样式属性，如clientWidth, offsetWidth及scrollHeight等。同时，展示了如何监听滚动事件，实现滚动到底部时解锁表单的功能。

练习测试代码：

<!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>
		<!--
        	如果为表单项添加disabled="disabled"，则表单项将变成不可用的状态
        -->
		<input type="checkbox" disabled="disabled"/>我已经仔细阅读协议，一定遵守
		<input type="submit" value="注册" disabled="disabled"/>
	</body>
</html>