js中offsetWidth、clientWidth、innerWidth的使用

offsetWidth、clientWidth、innerWidth宽度

offsetWidth = 水平方向的宽度+padding_left+padding_right+border
clientWidth = 水平方向的宽度+padding_left+padding_right
scrollWidth  = 可视区域宽度+被隐藏区域宽度
innerWidth = 浏览器窗口可视区域宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>offsetWidth测试</title>
<style>
	.div1{
     
     
		width:200px;
		height: 200px;
		background:#666;
		padding: 100px;
		border: 50px solid #000000; 
		margin:100px;
	}
</style>
</head>
<body>
	<div class="div1"></div>
</body>
<script>
	var div1 = document.querySelector(".div1");
	console.log("offsetWidth:"+div1.offsetWidth);
	console.log("clientWidth :"+div1.clientWidth);
	console.log("innterWidth:"+window.innerWidth);
	console.log("scrollWidth:"+div1.scrollWidth);
	console.log("scrollWidth:"+window.scrollWidth);
</script>
</html>

おすすめ

転載: blog.csdn.net/yuwusheng18/article/details/111866614