元素、视窗的宽高、位置信息

跟元素大小，位置有关的属性方法

offsetParent,offsetTop,offsetLeft,offsetWidth,offsetHeight;
scrollTop,scrollLeft,scrollWidth,scrollHeight;
clientTop,clientLeft,clientWidth,clientHeight
getBoundingClientRect();
style.width,style.height

下面我们以一个例子说明:

html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Element</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				margin: 50px;
				display: inline-block;
				width: 200px;
				height: 200px;
				border: 10px solid red;
				overflow-y: auto;
				overflow-x: hidden;
				word-wrap: break-word;
				font-size: 16px;
			}
			.pad40 {
				padding: 40px;
			}
			.borderBox {
				box-sizing: border-box;
			}
		</style>
	</head>

	<body>
		<div id="client1" class="box pad40">
			222233333445566778899123123142353463456222223333344556677889912312314235346345622223333344556677889912312314235346345622223333344556677889912312314235346345622223333344556677889912312314235346345622223333344556677889912312314235
		</div>
		<div id="client2" class="box pad40 borderBox">
			2222333334455667788991231231423534634562222233333445566778899123123142353463456222233333445566778899123123142353463456222233333445566778899123123142353463456222233333445566778899123123142353463456222233333445566778899123123142353463456222233333445566778899123123142353463456222233333445566778899123123142353463456222233333445566778899123123142353463456222233333445566778899123123142353463456222233333445566778899123123142353463456
		</div>
	</body>
</html>

有两个宽度为 200px 的 box，其 border 都为 10px、padding 为 40px、margin 为 50px, box1 设置了 box-sizing: border-box,box2 为默认的 box-sizing:content-box

那么我们分别看一下这两个 box 的各个信息的大小

var client1 = document.getElementById("client1");
var client2 = document.getElementById("client2");

console.log(client1.clientWidth); // 263   200+ 40*2 - 17
console.log(client1.offsetWidth); // 300   200+ 40*2 + 10*2
console.log(client1.scrollWidth); // 263   200+ 40*2 - 17
console.log(client1.style.width); // ''
console.log(client1.getBoundingClientRect().width); // 300   200+40*2 + 10*2

console.log('-------------------');
console.log(client1.clientHeight); // 280    200+ 40*2 （没有滚动条）
console.log(client1.offsetHeight); // 300    200+ 40*2 + 10*2
console.log(client1.scrollHeight); // 563
console.log(client1.style.height); // ''
console.log(client1.getBoundingClientRect().height); // 300 200+40*2 + 10*2

console.log('-------------------');
console.log(client1.getBoundingClientRect().bottom); //350px
console.log(client1.getBoundingClientRect().left); //50px
console.log(client1.getBoundingClientRect().right); //350px
console.log(client1.getBoundingClientRect().top); //50px
console.log(client1.getBoundingClientRect().width); //300px
console.log(client1.getBoundingClientRect().height); //300px
console.log(client1.getBoundingClientRect().x); //50px
console.log(client1.getBoundingClientRect().y); //50px

console.log('-------------------');
console.log(client2.clientWidth); // 163   200px - 10px*2 - 17px   // 主要是内容的宽度变小了
console.log(client2.offsetWidth); // 200   200px
console.log(client2.scrollWidth); // 163   200px - 10px*2 - 17px
console.log(client2.style.width); // ''
console.log(client2.getBoundingClientRect().width); // 200   200px

console.log(window.screen); // 1440
console.log(window.screen.width); // 1440
console.log(window.screen.height); // 900
console.log(window.screen.availHeight); // 860
console.log(window.screen.availWidth); // 1440
console.log(window.screenTop); // 浏览器距电脑屏幕顶部的高度  chrome不支持
console.log(window.screenLeft); // 浏览器距电脑屏幕左边的宽度 chrome不支持

元素、视窗的宽高、位置信息 ​

跟元素大小，位置有关的属性方法 ​

元素、视窗的宽高、位置信息

跟元素大小，位置有关的属性方法