菜鸟看前端（js获取盒模型）

最新推荐文章于 2022-07-18 22:18:54 发布

中庸之为德也，其至矣乎

最新推荐文章于 2022-07-18 22:18:54 发布

阅读量230

点赞数 2

文章标签： js 盒模型

本文链接：https://blog.csdn.net/weixin_45891146/article/details/112851720

版权

js获取盒模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#app{
				width: 100px;
				height: 100px;
				border: 5px solid black;
				margin: 10px;
				padding: 15px;
				background-color: #0088DD;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
		</div>
	</body>
	<script type="text/javascript">
		let box = document.getElementById('app')
		// ie获取盒子宽度
		// let wIe = box.currentStyle.width
		// console.log(wIe)  // 100px
		// 非IE 获取盒子模型宽度
		let w = window.getComputedStyle(box,null).width  
		console.log(w) //100px 只是设定的宽度
		
		console.log('clientWidth' + app.clientWidth + 'px') // 宽度+左右padding
		console.log('clientHeight' + app.clientHeight + 'px') // 高度+上下padding
		console.log('offset')
		console.log('offsetWidth' + app.offsetWidth + 'px') // 宽度 + 左右padding + 左右边框
		console.log('offsetHeight' + app.offsetHeight + 'px') // 高度 + 上下padding + 上下边框
	</script>
</html>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

中庸之为德也，其至矣乎

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
菜鸟看前端（js获取盒模型）

js获取盒模型<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #app{ width: 100px; height: 100px; border: 5px so
复制链接

扫一扫