js中offset,scroll和client系列

最新推荐文章于 2023-03-30 23:35:36 发布
最新推荐文章于 2023-03-30 23:35:36 发布
阅读量185 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37679293/article/details/86514614
版权 
*  offset系列:
*  (父级元素margin+父级元素padding+父级元素border+自己的margin)
*  offsetLeft:元素距离左边边缘位置的值
*  offsetTop:元素距离上面边缘位置的值
*//下面两个解决了通过elemen.style.width/height获取不到样式宽高的问题！！
*  offsetWidth:获取元素的宽度(有边框)
*  offsetHeight:获取元素的高度(有边框)
*
*  scroll系列:卷曲
*  scrollLeft:元素向左卷曲出去的距离
*  scrollTop:元素向上卷曲出去的距离
*  scrollWidth:元素中内容的实际的宽度,如果没有内容,或者内容很少,为元素的宽度
*  scrollHeight:元素中内容的实际的高度,如果没有内容,或者内容很少,为元素的高度
*
*
*  client系列:
*  clientWidth:元素实际的宽度,没有边框
*  clientHeight:元素实际的高度,没有边框
*  clientLeft:左边框的宽度
*  clientTop:上边框的宽度
*  clientX:可视区域的横坐标
*  clientY:可视区域的纵坐标
菜鸟更要好好努力撒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js学习-17（offset和scroll）
qq_42760119的博客
07-31 356
一、offset家族 三大家族：offset、scroll、client offset：偏移、补偿、位移 offset家族：是js中一套获取元素尺寸 的方法。 offset家族包括：offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent 1、offsetWidth和offsetHeight offsetwidth = content + padding + border offsetHeight = content + padding + bor
前端学习笔记-JS-BOM-元素可视区client系列/立即执行函数/元素滚动scroll系列
qq_36434637的博客
09-19 180
client client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 立即执行函数 不需要调用，立马能够自己执行的函数 主要作用：创建一个独立的作用域。避免了命名冲突问题 写法一：(function(){})() 写法二：(function(){}()) ...
scroll和offset案例
zuo_zuo_blog的博客
01-09 204
1.固定导航栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } im...
你真的懂offset与scroll吗？
weixin_30872789的博客
11-02 104
背景 身为一个前端工程师，每次在做关于滚动或者定位之类的交互时，或多或少都会用到offset、scroll之类的元素属性值来计算距离，但是每次都是现用现百度，从来没有真正系统地弄明白其中的原理及用法；在马上十一国庆假期以及项目压力较小的情况下，特作此篇总结以弥补相关知识的缺失 offset相关 以offset开头的属性有5个，分别是：offsetParent、offsetWi...
scroll、offset和client的区别
weixin_30437337的博客
04-22 122
整体布局： <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>比较</title> <style type="text/css"> *{ padding: 0; ...
JavaScript中offset、client、scroll、属性及使用
wmeng13的博客
07-17 417
  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{margin: 0px;padding:0px;} #box{w
js中offset,client , scroll 三大元素知识点总结
10-16
在本篇文章里小编给大家整理了关于js 元素offset,client , scroll 三大系列总结，有需要的朋友们可以学习下。
javascript中offset、client、scroll的属性总结
10-23
主要介绍了javascript中offset、client、scroll的属性总结的相关资料,需要的朋友可以参考下
javascript的offset、client、scroll使用方法详解
10-27
javascript的offset、client、scroll在使用过程中非常频繁，接下来将对此进行一一介绍，需要了解的朋友可以详细参考下
一张图帮你分清scroll、offset、client
简单是书的博客
11-24 841
编程时经常需要获取div的宽、高以及左右边距之类的数据，写法多样。它们之间的差别及其微小，稍微不注意就可能失之毫厘谬以千里。下面这张图可以帮你分清楚这些写法之间的关系。看到上面这张图，你一定觉得很复杂，数据太多不知道从哪里开始看起。不过没关系，我来帮你总结上面这张图的信息。1、div.scrollHeight 指的是整个文档的高度，即包括超出屏幕的部分。2、div.offsetHeight
client..和offset..以及scroll..的区别
长河落日的博客
10-16 199
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; * { margin: 0; padding: 0;
理解client、scroll和offset的差异
Ultranana的博客
03-19 696
client height&widthdocument.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 网页可见区域宽度 document.documentElement.clientHeight ==> 网页可见区域高度 do
JS之scrollTop详解
weixin_33826268的博客
11-12 604
1。各浏览器下 scrollTop的差异IE6/7/8： 对于没有doctype声明的页面里可以使用document.body.scrollTop来获取 scrollTop高度；对于有doctype声明的页面则可以使用document.documentElement.scrollTop；Safari: safari 比较特别，有自己获...
JavaScript中的scrollTop（js中的scrollTop，滚动到顶部，javascript滚动到顶部）
最新发布
weixin_65793170的博客
03-30 1万+
scrollTop是JavaScript中一个非常有用且重要的方法，它用于获取或设置元素的垂直滚动条位置，实现各种滚动相关的功能，无论是回到顶部、滚动到指定位置还是监听滚动事件，都需要用到scrollTop，在本文中，我们将深入了解scrollTop的用法和实际应用，这是一张scrollTop的关系图，仅供参考
Web前端之 offsetWidth，clientWidth，scrollWidth，offsetLeft，clientLeft，scrollLeft
菜鸟程序员成长路
10-18 1122
  二、涉及问题和总体概括：          如果你对width，offsetWidth，clientWidth，scrollWidth，offsetLeft，clientLeft，scrollLeft这几个的差别还不是很熟悉，那你最好翻阅资料搞清楚， 当然，你也可以看一下本文（虽然写的很差劲）；这几个概念，你会在开发的时候经常用到，因此，掌握还是很有必要的。         首先来说一...
获取滚动条位置documentElement.scrollTop和body.scrollTo
lbknxy的专栏
05-04 3575
获取滚动条位置documentElement.scrollTop和body.scrollTo 以及||符号的作用
区别client、offset、scroll系列以及event的几个距离属性
VivianHope的专栏
07-28 4573
element元素结点属性一. offset系列1.offsetWidth 和offsetHeightelement.offsetWidth是一个只读属性，它包括了： css width + padding+border+垂直滚动条宽度 这里的滚动条就是单纯滚动条的意思，不包括不可见的部分哦。 而element.offsetHeight与之类似，只是改为垂直方向而已。 在页面布局中要计算和考
JavaScript - offset系列 和 client系列
qq_33962481的博客
06-29 85
文章目录一、元素偏移量 offsetoffset系列属性二、offset和style的区别 一、元素偏移量 offset offset相关属性可以动态的得到该元素的位置(偏移), 大小等. 获得元素距离带有定位父元素的位置 获得元素自身的大小 返回的数组都不带单位. offset系列属性 element.offsetParent : 返回作为该元素带有定位的父级元素, 如果父级都没有定位则返回body. element.offsetTop : 返回元素相对带有定位父元素上方的偏移 element.o
请讲一讲JavaScript中offset，scroll，client，三者的作业与区别
03-27
在JavaScript中，offset、scroll和client都是针对元素位置和大小的属性。 1. offset offset指的是一个元素相对于其定位父元素的位置。offset包含了元素的位置（left和top）和大小（width和height），以像素为单位...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值