获取样式信息：ele.style.getPropertyValue()、getComputedStyle()、 getBoundingClientRect()

首先在html中引入样式的方式有3种：

1、行内样式,又称使用style特性定义针对特定元素的样式

eg: <div style="background: lightcoral;"></div>

2、内嵌样式,即在head标签内使用<style/>元素定义的嵌入式样式

eg: <head>

　　　　　　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

posted @ 2019-02-28 10:19 coconutGirl 阅读(362) 评论(0) 编辑收藏举报

coconutGirl