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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 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
NOT NULL 和NULL
2007/01/15 PHP
php实现单链表的实例代码
2013/03/22 PHP
PHP在线书签系统分享
2016/01/04 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
解密效果
2006/06/23 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
关于祖国的演讲稿
2014/05/04 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
给医院的感谢信
2015/01/21 职场文书
电影红河谷观后感
2015/06/11 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
Python基础详解之描述符
2021/04/28 Python