javaScript 获取宽高

遇见 - 怣

已于 2022-05-14 22:43:20 修改

阅读量179

点赞数

分类专栏：知识总结笔记文章标签： javascript 前端 css3

于 2022-05-14 22:34:46 首次发布

本文链接：https://blog.csdn.net/m0_49378755/article/details/124775123

版权

知识总结同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

笔记

10 篇文章 0 订阅

订阅专栏

获取宽高

元素尺寸属性	说明
clientWidth	获取元素可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域
clientHeight	获取元素可视部分的高度，即 CSS 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域
offsetWidth	元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条的宽度
offsetHeight	元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条的宽度
scrollWidth	当元素设置了 overflow:visible 样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域
scrollHeight	当元素设置了 overflow:visible 样式属性时，元素的总高度，也称滚动高度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function() {

				let btn = document.getElementsByTagName("button")[0];
				let di = document.getElementsByTagName("div")[0];

				btn.addEventListener('click', function() {
					// 窗口宽高
					let width = window.innerWidth;
					let height = window.innerHeight;
					// 屏幕宽高
					let w = window.screen.width;
					let h = window.screen.height;
					// 当前元素的宽高包括border padding 
					let ww = di.offsetWidth;
					let hh = di.offsetHeight;
					 当前元素的宽高包括 padding 
					let www = di.clientWidth;
					let hhh = di.clientHeight
					alert("浏览器显示窗口的宽度：" + width + " ,浏览器显示窗口高度：" + height + "\n" +
						"屏幕的宽度：" + w + " ,屏幕的高度：" + h + "\n" +
						"当前元素的宽度(包含border padding)：" + ww + " ,当前元素的高度：" + hh + "\n" +
						"当前元素的宽度(包含padding)：" + www + " ,当前元素的高度：" + hhh);
				})

			}
		</script>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			div {
				background-color: aqua;
				width: 90vw;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div>123</div>
		<button>点击</button>
	</body>
</html>