js怎样获取div元素的宽度_js 创建一个div, 写入文案,并获取宽度-优快云博客

本文链接：https://blog.youkuaiyun.com/woshidamimi0/article/details/102533043

有些时候需要获取到div的宽度

在线编程地址 https://www.w3school.com.cn/tiy/t.asp?f=html_basic

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		.box{
			width: 200px;
			height: 200px;
			padding: 5px;
			border: 3px solid red;
		}
		.box2{
			width: 220px;
			background: red;
		}
	</style>
</head>
<body>
	<div class="box">
		
	</div>
	<div class="box1 box2" style="width: 200px; height:200px;padding:5px;"></div>
</body>
</html>
<script type="text/javascript">
	var dom = document.querySelector('.box');
	var dom1 = document.querySelector('.box1');
	// 包括padding border
	console.log(dom.offsetWidth);
	// 不包括padding border 仅仅是width 这个ie也许有兼容性问题
	console.log(getComputedStyle(dom).width);
	// 获取到通过style设置的宽度, 如果是只有类，没有style,那么就获取为空
	console.log(dom1.style.width);
</script>