三剑客:offset、client和scroll还傻傻分不清?


Posted in Javascript onDecember 04, 2020

在学习前端的过程中,我们经常会碰到offset, client与scroll,所以我就把它们称作为‘三剑客'。

01  offset - 偏移量

定义:元素在屏幕上占用的所有的可见的空间。

元素可见的大小由其高度、宽度决定,包括所有内边距,滚动条和边框大小四个属性

三剑客:offset、client和scroll还傻傻分不清?

offset

css的样式:

<style>
 .son {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #ccc;
 }

 .father {
  width: 140px;
  height: 140px;
  padding: 10px;
  border: 10px solid black;
 }

 .grand {
  width: 180px;
  height: 180px;
  margin: 100px;
  padding: 10px;
  border: 10px solid orange;
 }
 </style>

HTML部分:

<div class="grand">
 <div class="father">
  <div class="son"></div>
 </div>
 </div>

offsetHeight:

元素正在垂直方向上占用的大小空间,px,元素的高度,水平滚动条的高度 + 上边框高度

offsetWidth:

元素在垂直方向上占用的大小空间,px,元素的宽度,垂直滚动条的宽度,左右边框的宽度

var grand = document.getElementsByClassName('grand')[0];
 var father = document.getElementsByClassName('father')[0];
 var son = document.getElementsByClassName('son')[0];

 console.log(grand.offsetHeight); // 220
 console.log(grand.offsetWidth); // 220

三剑客:offset、client和scroll还傻傻分不清?

offsetWidth,offsetHeight

offsetLeft:

元素的左外边框至包含元素的左内边框之间的像素距离

offsetTop

元素的上外边框至包含元素的上内边框之间的像素距离

offsetParent:

offsetLeft与offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中

offsetParent属性不一定与parentNode的值相等其实就是看看父元素们是否都有position:定位属性

console.log(son.offsetParent); // <body></body>
console.log(son.offsetLeft); // 148 // body的8pxmargin
console.log(son.offsetTop); // 140

当我们去修改某一个父元素的position的时候发生了这样的变化

grand.style.position = 'relative';
console.log(son.offsetParent); // grand作为了包含元素
console.log(son.offsetLeft); // 30
console.log(son.offsetTop); // 30

offsetLeft与offsetTop的值不一样了

这样我们就可以封装成一个方法,一直到获取最顶层的距离

function getOffset(ele) {
 var offset = {
  top: 0,
  left: 0
 }

 while (ele.offsetParent) {
  offset.top += ele.offsetTop;
  offset.left += ele.offsetLeft;
  ele = ele.offsetParent;
  console.log(ele, offset); // grand {left: 138, top: 130}
       // body {top: 130, left: 138}
 }
 return offset;
 }
 console.log(getOffset(son)); // {top: 130, left: 138}

02  客户区  client

三剑客:offset、client和scroll还傻傻分不清?

client

元素的客户区大小(client dimension)指的是元素内容及其内边距所占距的空间大小

clientWidth:

元素内容区宽度 + 左右内边距宽度

clientHeight:

元素内容区高度 + 山下内边距高度

我们可以用来获取浏览器视口大小代码如下

function getView() {
 return {
  w: document.body.clientWidth || document.documentElement.clientWidth,
  h: document.body.clientHeight || document.documentElement.clientHeight
 }
 }

03 scroll 滚动条的大小

我们一般看到的默认滚动条的宽度是17px;

滚动大小:指的是包含滚动内容的元素的大小

三剑客:offset、client和scroll还傻傻分不清?

scroll

scrollHeight: 在没有滚动条的情况下,元素内容的总高度

scrollWidth:在没有滚动条的情况下,元素内容的总宽度

HTML部分

<body>
 <div class="grand">
 <div class="father">
  <div class="son"></div>
 </div>
 </div>
</body>

JS打印:

console.log(son.scrollHeight);

此时返回的结果是120  在没有滚动条的情况下(子元素内容未超出的情况)

内容超出的情况

HTML部分

<div class="grand">
  <div class="father">
   <div class="son">
(备注:以下内容为乱打测试内容)
    四大皆空来得及啊电视机卡十九大达科技的萨克
    可视对讲阿克苏进度款垃圾的卡死了的健康垃圾
    肯德基卡萨阶段啦科技的卡拉胶打开链接的垃圾
    打卡大抗裂砂浆打卡机打卡机的刷卡机的拉家带
    口杀戮空间打卡机的阿克苏交大老师就打开打开
   </div>
  </div>
 </div>

JS部分:

console.log(son.scrollHeight); // 409 

//在子元素内容超出的情况下

scrollLeft: 被隐藏在内容区域左侧的像素值,通过设置这个属性可以改变元素的滚动位置

scrollTop:被隐藏在内容区域上方的像素值,通过这个属性可以改变元素的滚动位置

scrollWidth和scrollHeight主要用于确定元素内容的实际大小

var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);

 var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);

以上就是我们的‘三剑客'啦,不用再傻傻分不清啦!

参考资料:《高级语言程序设计》

到此这篇关于三剑客:offset,client和scroll的文章就介绍到这了,更多相关offset,client和scroll内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
Angular表单验证实例详解
Oct 20 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 #Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 #Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 #Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 #Vue.js
原生JS实现拖拽效果
Dec 04 #Javascript
You might like
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
php header示例代码(推荐)
2010/09/08 PHP
PHP中防止SQL注入实现代码
2011/02/19 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
php常用表单验证类用法实例
2015/06/18 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python切片工具pillow用法示例
2018/03/30 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
Python魔术方法专题
2020/06/19 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
社区综治工作汇报
2014/10/27 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python