JS获取盒模型对应的宽高

## 获取内联样式宽高

只能获取内联设置的样式，在style或者.css文件中设置的无法获取

 let div = document.querySelect('.test');

 let width = div.style.width

 let height = div.style.height

## currentStyle和getComputedStyle获取所有样式

两者只能获取样式，不能设置样式

let div = document.querySelect('.test');

let width;

if (div.currentStyle) {

  width = div.currentStyle.width;

} else {

  width = window.getComputedStyle(div, null).width;

   // width = window.getComputedStyle(div, null)['width'];

   // 第二个参数可选，省略或者null

}

针对获取任意样式，可做兼容性处理方法:

 function getStyle(element, attr) {

   if(element.currentStyle) {

      return element.currentStyle[attr];

   } else {

      return getComputedStyle(element, false)[attr];

   }

 }

至于 getBoundingClientRect（）是获取相对于视窗位置的集合, 可对应获取宽高，大小，位置。

 let div = document.querySelector('.test');

 let rectObject = div.getBoundingClientRect();

巴特西

JS获取盒模型对应的宽高

最新文章

热门文章