使用javascript怎么获取元素的计算样式

　　介绍

这篇文章给大家介绍使用javascript怎么获取元素的计算样式,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<强>背景

使用css控制页面有4种方式,分别为行内样式(内联样式),内嵌式、链接式,导入式。

<李>

行内样式(内联样式)即写在html标签中属的风格性中,如& lt; div祝辞& lt;/div>

<李>

内嵌样式即写在风格标签中,例如& lt;风格类型=拔谋?css"在div{宽度:100 px;身高:100 px} & lt;/style>

<李>

链接式即为用链接标签引入css文件,例如& lt;链接href=https://www.yisu.com/zixun/皌est.css rel=巴獠縩ofollow”type=" text/css " rel="样式表"/>

<李>

导入式即为用进口引入css文件,例如@ import url (“test.css")

如果想用javascript获取一个元素的样式信息,首先想到的应该是元素的风格属性。但是元素的风格属性仅仅代表了元素的内联样式,如果一个元素的部分样式信息写在内联样式中,一部分写在外部的css文件中,通过风格属性是不能获取到元素的完整样式信息的,因此,需要使用元素的计算样式才获取元素的样式信息。

<强>获取计算样式

元素的风格下的属性,默认为空字符串;

获取计算后的样式(非行间样式):
getComputedStyle(元素)。属性

获取到的结果为带单位的字符串,如:100 px;

写法:getComputedStyle(盒)。高度;

<强>获取宽高(尺寸)

<李>

避署。clientHeight/宽度支持填充,不包含边框,元素可视区宽度;

<李>

避署。offsetWidth/高包含填充、边境
　　,以上2个,如果设置一个固定值,就以固定值为依据显示,不会以被内容撑开显示;

<李>

ele.scrollWidth/高度被内容撑开的高度(不包含边框),
　　,无论是否设置固定样式,都以被内容撑开我显示结果;

<李>

边框尺寸

<李>

clientLeft/clientTop边框尺寸

<李>

getComputedStyle (box3)。borderTopWidth边框尺寸

以上获取到的都是不带单位的数字,并且范围为可视区;

<>强绝对位置

<强>元素距离

<李>

offsetParent 定位父级,没有定位父级走身体;

<李>

offsetLeft 当前元素(左外边框)到定位父级的(左内边框)距离,

<李>

offsetTop 当前元素(上外边框)到定位父级的(上内边框)距离,
　　,获取的是不带单位的数字。

如果要使用上面的属性,一定要做到以下几点:
1,子集有绝对定位;
2,定位父级也一定要有定位;
3,自己和父级都要有宽高(触发haslayout,变焦:1);

<李>

getBoundingClientRect ()

当前元素到页面可视区的尺寸,距离,

注意:

是跟滚动条走的。
也就是拖动滚动条值会变;

包含:宽/高/左/右/上/下/x/y

写法:box2。getBoundingClientRect ();

使用定位距离做一个小例子:

, let  timer =,空; 　　,box.onclick =function  () {=,,timer  setInterval()=祝辞{ 　　,box.style.left=box.offsetLeft  +, 1, + & # 39; px # 39;; 　　,},16.7) 　　以前,}

在此了解以下渲染帧:
渲染帧是指浏览器一次完整绘制过程,帧之间的时间间隔是DOM视图更新的最小间隔。由于主流的屏幕刷新率都在60 hz,因此渲染一帧的事件就必须控制在16.7毫秒内才能保证不掉帧。也就是说每一次渲染都要在16.7毫秒内页面才够流畅不会有卡顿感。

<强>封装绝对位置

//,使用边框,定位位置 　　,class  Tools  { 　　位置(避署){大敌; 　　,let  left =, 0; 　　,let  top =, 0; 　　,let  obj =,避署; 　　,而(obj) { 　　,//t =,当前元素的外边距,+,当前元素边框 　　+=,left  obj.offsetLeft  +, obj.clientLeft; 　　+=,top  obj.offsetTop  +, obj.clientTop; 　　,//重新设置Obj是谁,让Obj变为当前的定位父级=,,obj  obj.offsetParent;,//box3 →, box2 →, box1 →, 　　,} 　　-=,left  ele.clientLeft;,//多加一次box3的边界,所以要减去 　　-=,top  ele.clientTop; 　　,return  { 　　,离开了, 　　,最高 　　,} 　　,} 　　,} 　　,let  t1 =, new 工具; 　　直,console.log (t1.position (box3)上),

使用javascript怎么获取元素的计算样式