offset client scroll

最新推荐文章于 2024-04-01 13:53:31 发布
最新推荐文章于 2024-04-01 13:53:31 发布
阅读量113 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34849000/article/details/90267333
版权

offsetLeft  offsetTop  // 获取到的是 参照 最近的定位的元素   position
如果没有定位元素，则默认是以body作为参照，页面左上角

offsetWidth   offsetHeight   // offset 获取的大小   包含 padding  border  在内，但是不包括margin

offsetParent  // 获取到的是 参照物


clientLeft  clientTop  // 位置   其实不是位置 ，实质上 就是指的    border的宽度

clientWidth   clientHeight   // 大小  包含 内容 + padding的距离  也就是  background能作用上的
注意：这2个如果有自带滚动条占了位置，clientWidth和clientHeight的 值 = 内容+padding - 滚动条占的对应长度

 

scrollLeft   scrollTop  //  元素滚动出去的距离

scrollWidth  scrollHeight   //  内容的宽高  content  他跟 border padding margin 等等一些列都无关

qq_34849000
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
offset、client、scroll
m0_46978034的博客
03-22 418
文章目录1.元素偏移量offset系列 1.元素偏移量offset系列 1.offset系列相关属性可以动态的得到元素该元素的位置(偏移)/大小。 注意点 获得元素距离带有定位父元素的位置，如果父元素没有定位则以body为准 获得元素自身的大小（宽度） 返回的数值都是不带单位的 offset常用属性 代码演示如下 <style> .father { position: relative; width: 200px;
三大系列：offset，scroll，client
weixin_47450807的博客
03-07 1115
一、写在前面 之前一直对于offset，scroll, client这几大属性表示很懵，今天一文针对这些属性进行总结，从此再也不懵逼。 二、offset系列 1、offsetWidth属性 offsetWidth返回当前的元素宽度，这个宽度包括内容的宽度 + border的宽度 + padding的宽度。 offsetWidth是只读属性 2、offsetHeight属性 offsetHeight返回的是当前元素的高度，这个高度包括内容的高度 + border的高度 + offsetHeight是只读属性
offset、client、scroll三大系列详细分析
super码力的博客
12-28 1134
1.offset系列 经常用于获得元素位置offsetLeftoffsetTop 2.client经常用于获取元素大小clientWidthclientHeight 3.scroll 经常用于获取滚动距离scrollTopscrollLeft 4.注意页面滚动的距离通过 window.pageXOffset 获得
PC端网页特效（一）
zhr_beyond的博客
03-10 346
PC端网页特效（一） 1.元素偏移量 offset 系列 （1）offset offset 就是偏移量，可以动态的得到该元素的位置、大小等 ● 获取元素距离带有定位父元素的位置 ● 获取元素自身的大小 ● 返回的数值不带单位 （2）offset 系列常用属性 offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素 如果父级没有 element.offsetTop 返回元素相对带有定位父元素上方的偏移 element.offsetLeft
offset、client、scroll三大系列详细分析，面试总结+解答分享
最新发布
2401_84003599的博客
04-01 599
padding: 0;.father {.son {.w {js代码：输出结果：1、返回body上方的偏移；150就等于margin: 150px；输出数值不带单位；2、返回body左边框的偏移；100就是等于margin: 100px；不带单位；3、返回元素相对带有定位父元素上方的偏移；45就是等于margin-left: 45px;不带单位；4、返回元素相对带有定位父元素左边框的偏移；0就是等于margin: 0；不带单位；
js中offset,client , scroll 三大元素知识点总结
10-16
在本篇文章里小编给大家整理了关于js 元素offset,client , scroll 三大系列总结，有需要的朋友们可以学习下。
javascript的offset、client、scroll使用方法详解
10-27
javascript的offset、client、scroll在使用过程中非常频繁，接下来将对此进行一一介绍，需要了解的朋友可以详细参考下
javascript中offset、client、scroll的属性总结
10-23
主要介绍了javascript中offset、client、scroll的属性总结的相关资料,需要的朋友可以参考下
JS前端知识点offset，scroll，client，冒泡，事件对象的应用整理总结
10-16
主要介绍了JS前端知识点offset，scroll，client，冒泡，事件对象的应用,结合实例形式总结分析了offset，scroll，client，冒泡，事件对象相关功能、原理及操作注意事项,需要的朋友可以参考下
初识JS_WebAPI基础Day5入门到放弃——笔记整理+1面试常问+2课后作业...
Myself's CSDN
05-18 363
文章目录 一.元素偏移量 offset 系列 1 . offset 概述 2. offset 与 style 区别 二. 元素可视区 client 系列 1 . client概述 三.元素滚动 scroll 系列 1 . scroll 概述 2. 页面被卷去的头部 一.元素偏移量 offset 系列 1. offset 概述 offset 翻译过来就是偏移量， 使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度）
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
05-09
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
offset client scroll三剑客
zzz_zlp的博客
12-27 85
offset、client、scroll这几个概念很难记忆，所以打算存个档。。。 一、offset 在英文中 offset的意思是抵消 1、offsetX、offsetY 获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX （offsetY）规定了事件对象与目标节点的内填充边（padding edge）在 X （Y）轴方向上的偏移量。 比如我给div元素注册了点击事件，在div内容区域点击，获取的就是相对于div内容区域的坐标，但一定要注意，如果点击区域是border区域那么就是相
JavaScript WebAPI 系列五 offset系列 ； client系列；scroll系列；淘宝flexible源码；立刻执行函数；mouseenter 不冒泡；
m0_55170432的博客
03-30 266
1.0 元素偏移量 offset 系列 (返回的数值都不带单位) offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意： 返回的数值都不带单位 offset系列常用属性： element.offsetParent （返回作为该元素 带有定位的父极元素 ，如果父极没有定位返回 body）(这个不是一定是亲爸爸，只要带有定位的父极元素就行) element.offse
offset、client 和 scroll三大系列的属性及其作用
qq_46178261的博客
04-04 889
1. 元素偏移量 offset 系列 1.1 offset 概述 offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态得到该元素的位置(偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意：返回的值都不带单位。 offset系列常用属性 element.offsetParent：返回作为该元素带有定位的父级元素，如果父级都没有定位则返回...
区别client、offset、scroll系列以及event的几个距离属性
VivianHope的专栏
07-28 4560
element元素结点属性一. offset系列1.offsetWidth 和offsetHeightelement.offsetWidth是一个只读属性，它包括了： css width + padding+border+垂直滚动条宽度 这里的滚动条就是单纯滚动条的意思，不包括不可见的部分哦。 而element.offsetHeight与之类似，只是改为垂直方向而已。 在页面布局中要计算和考
Offset,Scroll和Client三大系列总结
Calla_Lj的博客
05-16 1025
Offset,Scroll和Client三大系列总结 offset系列 scroll系列 client系列 offsetWidth scrollWidth clientWidth offsetHeight scrollHeight clientHeight offsetLeft scrollLeft clientLeft offsetTop scrollTop clie...
JS-26-获取元素宽高其他方式/ 获取网页宽高
xxzjwyql的博客
07-01 338
一、获取元素宽高其它方式 1.通过 getComputedStyle 获取宽高 1.1获取的宽高不包括 边框和内边距 1.2即可以获取行内设置的宽高也可以获取CSS设置的宽高 1.3只支持获取, 不支持设置 1.4只支持IE9及以上浏览器 2.通过 currentStyle 属性获取宽高 2.1获取的宽高不包括 边框和内边距 2.2即可以获取行内设置的宽高也可以获取CSS设置的宽高 2.3只支持获...
offset client scroll
03-16
offset client scroll是指客户端滚动的偏移量。在网页中，当用户滚动页面时，页面会发生滚动，此时可以通过JavaScript获取页面滚动的偏移量，即offset client scroll。这个偏移量可以用来实现一些特殊的效果，比如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值