首先在html中引入样式的方式有3种：
1、行内样式,又称使用style特性定义针对特定元素的样式
eg: <div style="background: lightcoral;"></div>
2、内嵌样式,即在head标签内使用<style/>元素定义的嵌入式样式
eg: <head>
<style type="text/css">
div {
background-color:lightcoral;
}
</style>
</head>
3、链接样式，即通过<link />元素包含外部样式表文件
eg: <link ref="stylesheet" href="./common.css"></link>
然后获取元素样式属性的值：
1、获取元素引用：
let ele = document.getElementById('myDiv')
2、获取元素的style特性定义的样式：ele.style
注意：只能获取style特性样式信息，不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。
ele.style.width
ele.style.getPropertyValue('width')
3、获取元素所有计算的样式值：
getComputedStyle(ele).width
4、获取元素的大小及其相对于视口的位置:
ele.getBoundingClientRect()
top:盒子上边框距离视口的距离
bottom：盒子下边框距离视口的距离，不是常规意识中的盒子下边框距离视口底部的距离,也就是top+height
left:盒子左边框距离视口的距离
right:盒子有边框距离视口的距离，也就是left+width