js学习-17（offset和scroll）

最新推荐文章于 2021-05-16 16:39:21 发布
最新推荐文章于 2021-05-16 16:39:21 发布
阅读量354 收藏 3
点赞数
分类专栏： 前端学习 文章标签： javascript js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42760119/article/details/107704069
版权

一、offset家族

三大家族：offset、scroll、client

offset：偏移、补偿、位移

offset家族：是js中一套获取元素尺寸 的方法。

offset家族包括：offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent

1、offsetWidth和offsetHeight

offsetwidth = content + padding + border
offsetHeight = content + padding + border

所有节点元素都含有这两个属性，获取节点后，只需直接调用这两个属性即可获取元素节点的宽和高。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #d1{
   
    width: 300px;
    height: 300px;
    border: 10px solid skyblue;
    color: red;
    padding: 20px;
    margin: 10px auto;
   }
  </style>
 </head>
 <body>
  <div id="d1">
   hello js
  </div>
  
  <script type="text/javascript">
   var d1 = document.querySelector("#d1");
   console.log([d1]);
   //offsetwidth = content + padding + bor
最低0.47元/天 解锁文章
琦遇前端ing~
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
三大系列：offset，scroll，client
weixin_47450807的博客
03-07 1118
一、写在前面 之前一直对于offset，scroll, client这几大属性表示很懵，今天一文针对这些属性进行总结，从此再也不懵逼。 二、offset系列 1、offsetWidth属性 offsetWidth返回当前的元素宽度，这个宽度包括内容的宽度 + border的宽度 + padding的宽度。 offsetWidth是只读属性 2、offsetHeight属性 offsetHeight返回的是当前元素的高度，这个高度包括内容的高度 + border的高度 + offsetHeight是只读属性
offset、client、scroll三大系列详细分析
super码力的博客
12-28 1137
1.offset系列 经常用于获得元素位置offsetLeftoffsetTop 2.client经常用于获取元素大小clientWidthclientHeight 3.scroll 经常用于获取滚动距离scrollTopscrollLeft 4.注意页面滚动的距离通过 window.pageXOffset 获得
Web APIs 学习笔记（七）--- offset、client和scroll系列属性
weixin_45092437的博客
05-16 910
一、元素偏移量 offset 系列属性 1、offset 概述 ​ offset系列属性可以动态的获得页面中某元素的偏移量，也就是元素位置，以及元素的宽度高度等属性。但是要注意，获得的元素的偏移量是元素相对于带有定位的父元素的位置，如果没有带定位的父元素，则是相对于页面的位置。而且获得的元素的宽度和高度是包括元素的border、padding的。最后所有属性的返回值都是数值型，不带单位。 2、offset系列属性 ​ 总结： **offsetWidth=width+padding+border
你真的懂offset与scroll吗？
weixin_30872789的博客
11-02 99
背景 身为一个前端工程师，每次在做关于滚动或者定位之类的交互时，或多或少都会用到offset、scroll之类的元素属性值来计算距离，但是每次都是现用现百度，从来没有真正系统地弄明白其中的原理及用法；在马上十一国庆假期以及项目压力较小的情况下，特作此篇总结以弥补相关知识的缺失 offset相关 以offset开头的属性有5个，分别是：offsetParent、offsetWi...
JavaScript中offset系列和scroll系列的总结
迷途小书童----春天的博客
06-30 178
获取元素样式属性值 在写js代码的时候经常需要获取元素样式属性值，js中获取该值的基本方法有两种，分别是offset系列和getComputedStyle（或者currentStyle）两种，现在对两种方法分别做总结。 一、offset系列 1、定义以及用法 offset：js代码中是无法通过“对象.style.属性名”来获取属性值的，所以此时需要用到offset系列api来完成。常用的offs...
js中offset,client , scroll 三大元素知识点总结
10-16
在本篇文章里小编给大家整理了关于js 元素offset,client , scroll 三大系列总结，有需要的朋友们可以学习下。
JS前端知识点offset，scroll，client，冒泡，事件对象的应用整理总结
10-16
主要介绍了JS前端知识点offset，scroll，client，冒泡，事件对象的应用,结合实例形式总结分析了offset，scroll，client，冒泡，事件对象相关功能、原理及操作注意事项,需要的朋友可以参考下
js中的scroll和offset 使用比较的实例与分析
10-26
介绍了js中的scroll和offset使用比较的实例与分析，有需要的朋友可以参考一下
javascript中offset、client、scroll的属性总结
10-23
主要介绍了javascript中offset、client、scroll的属性总结的相关资料,需要的朋友可以参考下
第五天_DOM
weixin_45513733的博客
02-12 308
第五天 - Web APIs 学习目标: 能够说出常见 offset 系列属性的作用 能够说出常见 client 系列属性的作用 能够说出常见 scroll 系列属性的作用 能够封装简单动画函数 1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 1.1.
区别client、offset、scroll系列以及event的几个距离属性
VivianHope的专栏
07-28 4561
element元素结点属性一. offset系列1.offsetWidth 和offsetHeightelement.offsetWidth是一个只读属性，它包括了： css width + padding+border+垂直滚动条宽度 这里的滚动条就是单纯滚动条的意思，不包括不可见的部分哦。 而element.offsetHeight与之类似，只是改为垂直方向而已。 在页面布局中要计算和考
页面DOM元素的scroll与offset相关属性
左岸
10-01 1753
1.offsetParent元素的offsetParent属性是距离该元素最近的一个具有定位的父辈元素，如果没有符合条件的父辈元素，那么body就是它的offsetParent。2.offsetWidth与offsetHeightoffsetWidth=width+横向padding值+横向border值+[横向滚动条width] 实际上，就是元素渲染到页面后的实际宽度尺寸，是否包含横向滚动条的宽
offset系列、scroll系列和client系列
喵喵的博客
05-27 183
由于在style标签中设置的样式属性获取不到，style属性中设置的样式属性是可以获取到的，因此有时候需要借助offset系列来获取某些样式。 offsetWidth：获取元素的宽 offsetHeight：获取元素的高 offsetLeft：获取元素距离左边位置的值 offsetTop：获取元素距离上面位置的值 其中offsetLeft、 offsetTop没有脱离文档流的话，其值为父级元素m...
scroll和offset案例
zuo_zuo_blog的博客
01-09 197
1.固定导航栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } im...
JavaScript中offset、client、scroll、属性及使用
wmeng13的博客
07-17 414
  &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
client..和offset..以及scroll..的区别
长河落日的博客
10-16 197
&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;
js中offset,scroll和client系列
菜鸟要努力鸭的博客
01-16 181
* offset系列: * (父级元素margin+父级元素padding+父级元素border+自己的margin) * offsetLeft:元素距离左边边缘位置的值 * offsetTop:元素距离上面边缘位置的值 *//下面两个解决了通过elemen.style.width/height获取不到样式宽高的问题！！ * offsetWidth:获取元素的宽度(有边框) * of...
js 三大家族（offset/scroll/client）
09-10 5111
js 三大家族（offset/scroll/client） .box1 { width: 300px; height: 300px; padding: 100px; margin: 100px; position: relative;
js#offset和 scroll家族
LYR 的博客
07-24 107
js中有一套方便的获取元素尺寸的办法，就是 offset家族，offset家族包括： offsetWidth offsetHight offsetLeft offsetTop offsetParent <style> #p{ width:300px; height: 300px; margin: 10px; padding: 10px; background: greenyellow; } </s
offset client scroll
最新发布
03-16
在网页中，当用户滚动页面时，页面会发生滚动，此时可以通过JavaScript获取页面滚动的偏移量，即offset client scroll。这个偏移量可以用来实现一些特殊的效果，比如滚动到某个位置时触发某个事件，或者实现一些滚动...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值