前端路线--JavaScript篇（Day10）

最新推荐文章于 2022-09-21 08:56:06 发布

喝西瓜汁的兔叽Yan

最新推荐文章于 2022-09-21 08:56:06 发布

阅读量340

点赞数

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

本文链接：https://blog.csdn.net/Yan9_9/article/details/123096828

版权

前端专栏收录该内容

106 篇文章 5 订阅

订阅专栏

元素的client属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#box{
				width: 200px;
				height: 200px;
				background-color: aqua;
				border: solid 2px blue;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		
		<script type="text/javascript">
			//元素的client属性
			var box=document.getElementById('box');
			
			
			//内容可视区域的宽度和高度(只包含padding,不包含边框和滚动条)
			console.log(box.clientWidth,box.clientHeight);
			
			
			//返回元素左边框和上边框大小
			console.log(box.clientLeft,box.clientTop);
		</script>
	</body>
</html>

元素的scroll属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
				overflow: scroll;
				word-break: keep-all;
			}
		</style>
	</head>
	<body>
		<div id="box">
			fjkgfkjkgfkgjfkgjkfjgkjfkj
			绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			绝代风华东风股份借古讽今改进和付今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			绝代风华东风股份借古讽今改进和付今改进股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			绝代风华东风股份借古讽今改进和付今改进股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
			绝代风华东风股份借古讽今改进和付今改进绝代风华东风股份借古讽今改进和付绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
		</div>
		
		<script type="text/javascript">
			var box=document.getElementById('box');
			box.onscroll=function (e) {
				//滚动条x和y轴滚动的距离
				// console.log(box.scrollLeft,box.scrollTop);
				
				//返回实际的宽度
				console.log(box.scrollWidth,box.scrollHeight);
			}
		</script>
	</body>
</html>

window属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 500px;
				height: 1000px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		var box=document.getElementById('box');
		box.onclick=function (e) {
			var w=window;
			//页面滚动的距离
			console.log(w.pageXOffset,w.pageYOffset);
			
			//浏览器左上角和屏幕左上角的坐标
			console.log(w.screenLeft,w.screenTop);
			
			//电脑屏幕设置的分辨率
			console.log(w.screen.width,w.screen.height);
			
			//浏览器可视区的宽高
			console.log(w.innerWidth,w.innerHeight);
		}
	</script>
</html>

案例：返回顶部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			#top{
				height: 600px;
				background-color: #00FFFF;
			}
			#main{
				height: 800px;
				background-color: pink;
			}
			#foot{
				height: 800px;
				background-color: blueviolet;
			}
			#returnTop{
				width: 80px;
				height: 80px;
				background-color: coral;
				text-align: center;
				position: fixed;
				left: 50px;
				bottom: 100px;
				display: none;
			}
			a{
				text-decoration: none;
				font-size: 30px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="top"></div>
		<div id="main"></div>
		<div id="foot"></div>
		<div id="returnTop">
			<a href="javascript:void(0)">返回顶部</a>
		</div>
		
		<script type="text/javascript">
			var returnTop=document.getElementById('returnTop');
			var myTop=document.getElementById('top');
			//给window添加滚动事件
			window.onscroll=function () {
				//判断滚动距离是否超出顶部盒子，超出让返回顶部的盒子出现
				if(window.pageYOffset>myTop.offsetHeight){
					returnTop.style.display='block';
				}else{
					returnTop.style.display='none';
				}
			}
			//加上返回事件
			returnTop.onclick=function () {
				window.scroll(0,0);
			}
		</script>
	</body>
</html>

案例：跳楼机

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.one{
			height: 1000px;
			background-color: #8A2BE2;
		}
		div{
			text-align: center;
		}
			#top1{
				height: 800px;
				background-color: #00FFFF;
			}
			#top2{
				height: 800px;
				background-color: #FF7F50;
			}
			#top3{
				height: 800px;
				background-color: bisque
			}
			#top4{
				height: 800px;
				background-color: brown;
			}
			#top5{
				height: 800px;
				background-color: cornflowerblue;
			}
			#side_bar{
				width: 100px;
				position: fixed;
				left: 50px;
				bottom: 100px;
				display: none;
			}
			.item{
				width: 100px;
				height: 30px;
				line-height: 30px;
				border: solid 1px gray;
			}
			.first_color{
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div id='top1'>top1</div>
		<div id='top2'>top2</div>
		<div id='top3'>top3</div>
		<div id='top4'>top4</div>
		<div id='top5'>top5</div>
		
		<div id="side_bar">
			<div class="item first_color">top1</div>
			<div class="item">top2</div>
			<div class="item">top3</div>
			<div class="item">top4</div>
			<div class="item">top5</div>
		</div>
		
		
		<script type="text/javascript">
			var sideBar=document.getElementById('side_bar');
			var top1=document.getElementById('top1');
			var top2=document.getElementById('top2');
			var top3=document.getElementById('top3');
			var top4=document.getElementById('top4');
			var top5=document.getElementById('top5');
			var items=document.getElementsByClassName('item');
			//window滚动事件
			document.onscroll=function (e) {
				//判断让sideBar出来(如果滚轮滚动的距离>top1距离浏览器顶部的偏移就让sidebar显示)
				if(window.pageYOffset>=top1.offsetTop){
					sideBar.style.display='block';
				}else{
					sideBar.style.display='none';
				}
				//判断区间(滚轮滚动的距离>=top1距离浏览器顶部的偏移并且<top2距离浏览器顶部的偏移)
				if(window.pageYOffset>=top1.offsetTop && window.pageYOffset<top2.offsetTop){
					initColor(items);
					items[0].style.backgroundColor='orange';
				}else if(window.pageYOffset>=top2.offsetTop && window.pageYOffset<top3.offsetTop){
					initColor(items);
					items[1].style.backgroundColor='orange';
				}else if(window.pageYOffset>=top3.offsetTop && window.pageYOffset<top4.offsetTop){
					initColor(items);
					items[2].style.backgroundColor='orange';
				}else if(window.pageYOffset>=top4.offsetTop && window.pageYOffset<top5.offsetTop){
					initColor(items);
					items[3].style.backgroundColor='orange';
					//滚轮滚动的距离>=top5距离浏览器顶部的偏移并且<第五个到浏览器顶的距离+自身的高
				}else if(window.pageYOffset>=top5.offsetTop && window.pageYOffset<=(top5.offsetTop+top5.offsetHeight)){
					initColor(items);
					items[4].style.backgroundColor='orange';
					//让sideBar消失
				}else{
					sideBar.style.display='none';
				}
			}
			
			
			//初始化颜色的函数
			function initColor (arr) {
				for (var i = 0; i < arr.length; i++) {
					arr[i].style.backgroundColor='fuchsia';
				}
			}
		</script>
	</body>
</html>

喝西瓜汁的兔叽Yan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端路线--JavaScript篇（Day10）

元素的client属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #box{ width: 200px; height: 200px; backgr
复制链接

扫一扫