javascript获取元素的计算样式

网络编程 2024/12/29 佚名

3 1 2

背景

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

行内样式(内联样式)即写在html标签中的style属性中，如 <div style="width:100px;height:100px;"></div>
内嵌样式即写在style标签中，例如<style type="text/css">div{width:100px; height:100px}</style>
链接式即为用link标签引入css文件，例如<link href="test.css" rel="external nofollow" type="text/css" rel="stylesheet" />
导入式即为用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被内容撑开的高度（不包含边框）；
无论是否设置固定样式，都以被内容撑开我显示结果；
边框尺寸

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(）；

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

 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);

返回顶部的小例子

<style>
*{
 margin:0;
 padding:0;
}
#box{
 width:100px;
 height:50px;
 font-size:20px;
 text-align: center;
 line-height: 50px;
 color:#fff;
 background: red;
 cursor: pointer;
 position:fixed;
 bottom:0;
 right:0;
 display: none;
}
body,html{
 height:3000px;
}
</style>
</head>
<body>
 <div id="box">返回顶部</div>
<script>
 window.onscroll = function(){
 // console.log(window.pageYOffset);
 if(window.pageYOffset >= 600){
 box.style.display = 'block';
 }else{
 box.style.display = 'none';
 }
 }
 let timer = null;
 box.onclick = function(){
 let t = window.pageYOffset;
 timer = setInterval(() => {
 t-=100;
 if(t <= 0){
 t = 0;
 clearInterval(timer);
 }
 window.scrollTo(0,t);
 }, 16.7);
 }
</script>

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

javascript获取元素,js,计算样式

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“javascript获取元素的计算样式”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月29日

javascript获取元素的计算样式

redux.js详解及基本使用

运用js实现图层拖拽的功能

评论“javascript获取元素的计算样式”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接