window.getComputedStyle和dom.getBoundingClientRect()获取宽度的区别

九段刀客

已于 2023-12-18 03:16:25 修改

阅读量1.7k

点赞数

文章标签： javascript 前端 css3

于 2021-12-14 10:32:58 首次发布

本文链接：https://blog.csdn.net/weixin_35958891/article/details/121921332

版权

getComputedStyle

获取到的是class中写的width这个值，Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

getBoundingClientRect

获取到的是元素真实占用的宽度，一般用于返回元素的大小及其相对于视口的位置。

完整代码

在这里插入图片描述

<!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>
		.canvas{
			width: 500px;
			height: 500px;
			border: 1px solid red;
		}
		.test{
			width:100px;
			height: 300px;
			border:1px solid red;
			background: pink;
		}
	</style>
</head>
<body>
	<div class="test">33232</div>
	<script>

		
		let test = document.querySelector('.test');
		let test_style = window.getComputedStyle(test);
		console.log(test_style.width)
		let test2 = test.getBoundingClientRect();
		console.log(test2)
	</script>
</body>
</html>