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>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #htmlampgtam
