js中offsetWidth、clientWidth、innerWidth的使用

最新推荐文章于 2024-05-10 17:27:37 发布

壮乡码农

最新推荐文章于 2024-05-10 17:27:37 发布

阅读量302

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/yuwusheng18/article/details/111866614

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>