javascript获取元素的计算样式


Posted in Javascript onMay 24, 2019

背景

使用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被内容撑开的高度(不包含边框);
    无论是否设置固定样式,都以被内容撑开我显示结果;
  • 边框尺寸
  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);

返回顶部的小例子

<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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
js读取cookie方法总结
Oct 31 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
运用js实现图层拖拽的功能
May 24 #Javascript
了解javascript中let和var及const关键字的区别
May 24 #Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 #Javascript
小程序登录/注册页面设计的实现代码
May 24 #Javascript
微信小程序+云开发实现欢迎登录注册
May 24 #Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 #Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 #Javascript
You might like
php中3种方法删除字符串中间的空格
2014/03/10 PHP
php浏览历史记录的方法
2015/03/10 PHP
newxtree.js代码
2007/03/13 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
js快速排序的实现代码
2013/12/08 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
JavaScript实现下拉列表
2021/01/20 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
详解Python网络爬虫功能的基本写法
2016/01/28 Python
python机器学习实战之K均值聚类
2017/12/20 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
python 调用钉钉机器人的方法
2019/02/20 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Python验证码截取识别代码实例
2020/05/16 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
《春天来了》教学反思
2014/04/07 职场文书
2014年检验员工作总结
2014/11/19 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
使用Ajax实现无刷新上传文件
2022/04/12 Javascript