【JavaScript-17】BOM-04 获取页面宽高、盒子宽高

最新推荐文章于 2023-07-04 11:36:25 发布

简单Janeee

最新推荐文章于 2023-07-04 11:36:25 发布

阅读量1.2k

点赞数

分类专栏： JavaScript基础文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/liqiannan8023/article/details/125695892

版权

JavaScript基础专栏收录该内容

44 篇文章 0 订阅

订阅专栏

八、获取页面宽高

响应式页面使用

1.window.innerWidth

不包含控制台、菜单栏(低配版的ie不支持)，包含滚动条

		var w1 = window.innerWidth;
		var h1 = window.innerHeight;

2.document.documentElement.clientWidth

兼容低版本的ie，页面可视的宽高不包含控制台，菜单栏，滚动条宽度

		var w2 =document.documentElement.clientWidth;
		var h2 = document.documentElement.clientHeight;

3.document.body.clientWidth;

获得body的值，清空内外边距之后与以上两个相同,不包含内外边距，滚动条

		var w3 = document.body.clientWidth;
		var h3 = document.body.clientHeight;

4.补充

屏幕大小发生变化时触发

onresize

	//补充：
		//屏幕大小发生变化时触发
		window.onresize = function (){
			console.log("屏幕大小发生变化的触发");
		}

九、盒子的宽高

offsetWidth,offsetHeight

获取的是实际宽度+内边距+边框=实际盒子的宽度

var box = document.querySelector(".box");
		console.log(box.offsetWidth,box.offsetHeight);

十、offset

//当父级没有定位时，偏移量计算的是本身到页面的距离
//当父级有定位时，偏移量计算的是本身到有定位的父级的距离
//当本身脱标时，偏移量就是本身的left/top

<style>
		*{
			padding:0;
			margin:0;
		}
		.box1{
			width: 300px;
			height: 300px;
			background-color: blue;
			margin-left: 20px;
			position: relative;
		}
		.box2{
			width: 100px;
			height: 100px;
			background-color: red;
			margin-left:30px;
			position: absolute;
			left: 40px;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2"></div>
	</div>
	
	<script>
		var box2 = document.querySelector(".box2");

		console.log("距离左边的距离",box2.offsetLeft);
		console.log("向下偏移",box2.offsetTop);
		

	</script>

简单Janeee

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript-17】BOM-04 获取页面宽高、盒子宽高

获得body的值，清空内外边距之后与以上两个相同,不包含内外边距，滚动条。兼容低版本的ie，页面可视的宽高不包含控制台，菜单栏，滚动条宽度。//当父级有定位时，偏移量计算的是本身到有定位的父级的距离。//当父级没有定位时，偏移量计算的是本身到页面的距离。//当本身脱标时，偏移量就是本身的left/top。不包含控制台、菜单栏(低配版的ie不支持)，包含滚动条。获取的是实际宽度+内边距+边框=实际盒子的宽度。屏幕大小发生变化时触发。...
复制链接

扫一扫