client-可视区域的宽高

最新推荐文章于 2022-04-27 15:10:15 发布

zuo_zuo_blog

最新推荐文章于 2022-04-27 15:10:15 发布

阅读量197

点赞数

分类专栏：ＪａｖａＳｃｒｉｐｔ

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/103976996

版权

ＪａｖａＳｃｒｉｐｔ专栏收录该内容

105 篇文章 2 订阅

订阅专栏

1. Onresize事件
只要浏览器的大小改变，哪怕1像素，都会触动这个事件。
在这里插入图片描述

2.获取屏幕可视区域的封装

<script>
			/* console.log(document.body.clientHeight);
			console.log(document.body.clientWidth);
			console.log(document.documentElement.clientWidth);
			console.log(document.documentElement.clientHeight);
			console.log(window.innerHeight);
			console.log(window.innerWidth); */
			
			window.onresize=function(){
				console.log(1)
				document.title=client().width+"  "+client().height;
			}
			
			
			//获取屏幕可视区域的封装
			function client(){
				if(window.innerHeight!==undefined){
					return{
						"width":window.innerWidth,
						"height":window.innerHeight
					}
				}else if(document.compatMode==="CSS1Compat"){
					return{
						"width":document.documentElement.clientWidth,
						"height":document.documentElement.clientHeight
					}
				}else{
					return{
						"width":document.body.clientWidth,
						"height":document.body.clientHeight
					}
				}
			}
		</script>

3. 案例：根据浏览器可视区域大小，给定背景色
（基于响应式原理）

<body>
		<script src="jquery1.0.0.1.js"></script>
		<script>
			window.onresize=fn;
			fn();
			function fn(){
				if(client().width>960){
					document.body.style.backgroundColor="red";
				}else if(client().width>640){
					document.body.style.backgroundColor="blue";
				}else{
					document.body.style.backgroundColor="green";
				}
			}
		</script>
	</body>

4. 获得屏幕宽高（获得的是电脑分辨率）
window.screen.width
分辨率是屏幕图像的精密度，指显示器所能显示的像素有多少。

<script>
			window.onresize=function(){
				document.title=window.screen.width;
			}
		</script>

zuo_zuo_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
client-可视区域的宽高

1. Onresize事件只要浏览器的大小改变，哪怕1像素，都会触动这个事件。2.获取屏幕可视区域的封装<script> /* console.log(document.body.clientHeight); console.log(document.body.clientWidth); console.log(document.documentElement...
复制链接

扫一扫