使用javascript怎么获取元素的计算样式-创新互联

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

创新互联建站于2013年成立,是专业互联网技术服务公司,拥有项目成都做网站、网站建设、外贸营销网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元秦安做网站,已为上家服务,为秦安各地企业和个人服务,联系电话:18982081108

背景

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

  • 行内样式(内联样式)即写在html标签中的style属性中,如

  • 内嵌样式即写在style标签中,例如

  • 链接式即为用link标签引入css文件,例如

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

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

获取计算样式

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

获取计算后的样式(非行间样式):
getComputedStyle(element).属性

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

写法: getComputedStyle(box).height;

获取宽高(尺寸)

  • ele.clientHeight/Width 支持padding,不包含边框,元素可视区宽度;

  • ele.offsetWidth/Height 包含padding、border
     以上2个,如果设置一个固定值,就以固定值为依据显示,不会以被内容撑开显示;

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

  • 边框尺寸

  1. clientLeft/clientTop边框尺寸

  2. getComputedStyle(box3).borderTopWidth 边框尺寸

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

绝对位置

元素距离

  • offsetParent  定位父级,没有定位父级走body;

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

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

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

  • getBoundingClientRect()

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

注意:

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

包含:width/height/left/right/top/bottom/x/y

写法:box2.getBoundingClientRect();

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

 let timer = null;
 box.onclick =function (){
 timer = setInterval(()=>{
 box.style.left= box.offsetLeft + 1 +'px';
 },16.7)
 }

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

封装绝对位置

// 使用边框、定位位置
 class Tools {
 position(ele){ 
 let left = 0;
 let top = 0;
 let obj = ele;
 while(obj){
 // t = 当前元素的外边距 + 当前元素边框
 left += obj.offsetLeft + obj.clientLeft;
 top += obj.offsetTop + obj.clientTop;
 //重新设置Obj是谁,让obj变为当前的定位父级
 obj = obj.offsetParent; //box3 -> box2 -> box1 -> 
 }
 left -= ele.clientLeft; //多加一次box3的border,所以要减去
 top -= ele.clientTop;
 return {
 left,
 top
 }
 }
 }
 let t1 = new Tools;
 console.log(t1.position(box3).top);

返回顶部的小例子




 返回顶部

关于使用javascript怎么获取元素的计算样式就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


当前标题:使用javascript怎么获取元素的计算样式-创新互联
当前URL:http://azwzsj.com/article/cddhpj.html

其他资讯