js获取元素宽、高、边框。。。。等等css属性

1. element.style.height

   • 获取的是内联属性（即： 标签内设置的style）,也就是说如果是在 css中设置的，获取不到。

   • 通常只用来设置样式。

2. element.offsetHeight element.scrollHeight element.clientHeight

   获取到的结果都是Number，不带单位

   clientWidth	获取元素可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域
   clientHeight	获取元素可视部分的高度，即 CSS 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域
   offsetWidth	元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条的宽度
   offsetHeight	元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条的宽度
   scrollWidth	当元素设置了 overflow:scroll 样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域
   scrollHeight	当元素设置了 overflow:scroll 样式属性时，元素的总高度，也称滚动高度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域

3. window.getComputedStyle

   返回的是元素所有的样式属性

语法：

let ele = document.getElementById('id')
window.getComputedStyle(ele, [伪类])

/* 第二个参数可选（用于获取伪元素）例子如下：*/
window.getComputedStyle(ele, 'after') // 获取到ele元素的after伪元素

返回值 ：CSSStyleDeclaration 类型的对象 详情

获取到的结果都是String，带单位

let csd = window.getComputedStyle(ele)
/* 无论用哪种，都得用驼峰形式 即 background-color => backgroundColor */

/* 取值方式 1 :直接点出来就行 */
csd.backgroundColor

/* 取值方式 2 */
csd.getPropertyValue('backgroundColor')

/* 补充 */
// 获取指定样式是否设置 important
csd.getPropertyPriority('backgroundColor')