javascript获取元素的计算样式

2023-08-23 01:54:04 173

背景

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

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

内嵌样式即写在style标签中，例如div{width:100px;height:100px}

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

导入式即为用import引入css文件，例如@importurl("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被内容撑开的高度（不包含边框）；
无论是否设置固定样式，都以被内容撑开我显示结果；
边框尺寸

clientLeft/clientTop边框尺寸
getComputedStyle(box3).borderTopWidth边框尺寸

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

绝对位置

元素距离

offsetParent 定位父级，没有定位父级走body;
offsetLeft 当前元素（左外边框）到定位父级的（左内边框）距离；
offsetTop 当前元素（上外边框）到定位父级的（上内边框）距离；
获取的是不带单位的数字。

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

getBoundingClientRect()

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

注意:

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

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

写法：box2.getBoundingClientRect(）；

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

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

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

封装绝对位置

//使用边框、定位位置
classTools{
position(ele){
letleft=0;
lettop=0;
letobj=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
}
}
}
lett1=newTools;
console.log(t1.position(box3).top);

返回顶部的小例子




返回顶部

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

javascript获取元素的计算样式

热门推荐

随机推荐