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 相关文章推荐
几个有趣的Javascript Hack
Jul 24 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
运用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使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
python机器学习之决策树分类详解
2017/12/20 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python 字符串池化的前提
2020/07/03 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
医学生自我鉴定范文
2013/11/08 职场文书
信息部岗位职责
2013/11/12 职场文书
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
护士岗位职责
2014/02/16 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
慰问信格式规范
2015/03/23 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
python中24小时制转换为12小时制的方法
2021/06/18 Python
Python绘画好看的星空图
2022/03/17 Python