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 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
JS 判断undefined的实现代码
Nov 26 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 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
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
react ant Design手动设置表单的值操作
2020/10/31 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
Django处理文件上传File Uploads的实例
2018/05/28 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
Python中qutip用法示例详解
2020/10/02 Python
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
物业管理专业个人的自我评价
2013/11/19 职场文书
销售员岗位职责范本
2014/02/03 职场文书
客服部工作职责范本
2014/02/14 职场文书
广告创意求职信
2014/03/17 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
政风行风整改方案
2014/10/25 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
基于Python实现股票收益率分析
2022/04/02 Python