JS——offset&client&screen&page&scroll

已于 2022-04-12 21:59:36 修改
阅读量331 收藏 2
点赞数
分类专栏： JS 文章标签： javascript 前端 css3 开发语言
于 2022-02-20 20:29:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52148548/article/details/123035154
版权

offset相关

offset的含义是偏移量，使用offset的相关属性可以动态地获取该元素的位置、大小等

返回值都不带单位

offsetX,offsetY：鼠标相对于”触发事件的元素“的位置。
offsetWidth,offsetheight：padding+border+content
在这里插入图片描述

offset和style的区别

style获取的值都是字符串都带单位,stylewidth，styleheight获得的值只包含content
在这里插入图片描述

client相关

返回值都不带单位
clientWidth,clientHeight：padding+content
clientX，clientY：鼠标相对于浏览器可视区域的X，Y坐标，参照点是可视区域左上角，可视区域不包括工具栏和滚动条。
在这里插入图片描述

screen相关

返回值都不带单位
screenX，screenY：鼠标相对于用户显示器屏幕左上角的X，Y坐标。

page相关

返回值都不带单位
pageX,pageY：类似于clientX，clientY，但是它们使用的是文档坐标而非窗口坐标。

scroll相关

返回值都不带单位
scroll的含义是滚动，使用scroll系列的相关属性可以动态地获取该元素地滚动距离。大小等
在这里插入图片描述

甜甜酷盖
关注
专栏目录
JavaScript中offset、client、scroll、screen、page五大系列
m0_48982503的博客
09-18 625
一、offset系列 1. offsetX、offsetY 获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX （offsetY）规定了事件对象与目标节点的内填充边（padding edge）在 X （Y）轴方向上的偏移量。 注意：offsetX（offsetY）与clientX（cilentY）的区别是，前者是相对于触发事件的对象的坐标，而后者是相对于浏览器可视区域的坐标。IE8不支持事件参数e，要想使用事件参数对象必须是window.event。 2. offsetP.
offset、client、scroll、screen、page五大系列的区别（二）
老曹的博客
06-08 903
上一篇主要讲述了offset系列，篇幅过长，所以每个系列单独放一篇文章吧，css代码和上一章节是一样的 client系列 ①clientX和clientY 获取鼠标指针位置相对于可视区域的 x 坐标和y坐标，也就是说是相对于浏览器的距离，跟触发事件的对象没关系 代码如下： div1.onclick = function (e) { e = window.event || e; //...
pagescroll.js:像单页一样滚动您的网站
05-25
pagescroll.js 安装： npm i @woobble/pagescroll.js 用法： import pagescroll from '@woobble/pagescroll.js' // Create instance const pScroll = pagescroll ( { tags : [ "tag1" , "tag2" , ] , initialize : true } ) // If initialize: false pScroll . initialize ( ) // Destroy instance pScroll . destroy ( ) 建造 git clone https://github.com/Woobble/pagescroll.js.git cd pagescroll.j
js中offset、client、scroll、screen、page用法
CYL_2021的博客
04-26 1834
一.offset offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移），大小等 获取元素距离带有定位父元素的位置 获取元素自身的大小（宽度高度） 注意：返回值都不带单位 常用属性： 1.1 offsetX，offsetY 获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX （offsetY）规定了事件对象与目标节点的内填充边（padding edge）在 X （Y）轴方向上的偏移量。 2.2 offsetWidth，offsetHe
JavaScript中offset screen client的区别
需要更努力的博客
10-19 138
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="p1"></div> <script> p1 =...
js中offset系列、client系列、scroll系列和screen系列详解
RayShyy的博客
03-15 909
1. offset系列 element.offsetTop: 返回元素距离带有定位的父元素的顶部的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetLeft: 返回元素距离带有定位的父元素的左侧的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetWidth: 返回元素大小，元素内容宽度 + padding值 + border值； element.offsetHeight: 返回元素大小，元素内容高度 + padding值 + bord
JS中的 offset client screen 等值的含义
JS中字符串的操作
12-27 173
console.log(btn.offsetLeft);//offsetLeft 左偏移量 ？？？？？是不是离左边的距离 console.log(btn.offsetTop);//offsetTop 上偏移量 btn.offsetHeight 元素的实际高度，包括边框线 console.log(btn.offsetWidth); 元素的实际宽度，包括边框线 console.log(btn.o...
offset、client、scroll、screen、page五大系列的区别（三）
老曹的博客
06-12 796
接上两篇文章，前面已经讲了offset系列和client系列，这篇文章主要讲scroll系列 scroll系列 ①scrollWidth / scrollHeight 元素内容实际宽度 / 高度（不包括border） 分两种情况： 这个元素内容的宽度 or 高度 没有超过这个元素的宽 or 高，那么scrollWidth / scrollHeight指的就是这个元素的width + pad...
干前端，并非只用 node.js，我用C语言
最新发布
09-19 388
就是用C语言干前端的活，大部分工作都是UI界面布局，这部分工作占到了 2/3 的工作量。我并不做硬件和嵌入式，接触嵌入式开发纯属偶然，我们的产品方向决定向电子学生证、儿童手表方向倾斜，找到一些硬件厂商，他们没有能力做开发，于是我只能亲自下场。工作内容跟调 CSS 差不多，垂直布局，水平布局，对象隐藏，对象显示，前景色，背景色，字体，字号，字体颜色，字体对其。最近在开发电子学生证，就是下面这玩意，说高大上点叫“嵌入式”开发，实际上呢？下面就是UI布局部分，前端小伙伴，有没有兴趣挑战一下。
使用spring boot实现一个简单的项目——⽤户管理功能
低头敲代码的博客
03-04 929
Spring Boot之用户管理功能    趁着这几天有时间跟大家分享一个使用spring boot实现的一个简单的项目，也开启了我第一次在CSDN上面写博客，相信这是个新的篇章。好了，废话不多说，直接上真家伙。快速上手    添加依赖    在pom文件⾥⾯添加 JPA 和 Thymeleaf 的相关包引⽤，因为我们要对String做一些处理，所以添加了 commons-lang3包，使⽤ co...
scrollpage:滚动页，全屏滚动，鼠标轮，jQuery，全页滚动
04-30
jQuery鼠标滚轮滚动整页 演示版 ： :
ScrollPageDemo
06-26
利用UIScrollView实现循环滚动翻页的方法博客实现的源码下载。
一张图解释page、client、offset、screen区别
web_qdkf的博客
04-06 4641
一张图解释page、client、offset、screen区别
js使用scroll下拉刷新
weixin_34255055的博客
02-22 370
为什么80%的码农都做不了架构师？>>> ...
JavaScript的offset系列，client系列，page系列，scroll系列
TrumanGao的博客
11-16 825
JavaScript的offset系列，client系列，page系列，scroll系列 一、offset系列 offsetX，offsetY 是该事件发生的盒子模型里的坐标，以盒子模型的左上角为原点，与滚动条无关。 offsetLeft, offsetTop 此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是...
vue,底层方法scroll.js
weixin_40542544的博客
01-07 853
scroll 方法汇集 // import { isServer } from './index' const isServer = false; // [debounce 和 throttle](https://www.cnblogs.com/wilber2013/p/5893426.html) // const docE = document.documentElement // con...
利用jquery.fullPage.js 和 scrolloverflow.min.js 实现滚屏效果
weixin_30421525的博客
07-15 419
参考链接：https://blog.csdn.net/c11073138/article/details/79631036 /* 按着思路去search。 */ 转载于:https://www.cnblogs.com/Neilisme/p/9314741.html
offset、client、scroll、screen、page五大系列的区别（一）
老曹的博客
06-08 2955
offset、client、scroll、screen的区别 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); ...
前端三剑客：理解offset、client与scroll的区别与用法
在前端开发中，"三剑客"——offset、client和scroll是三个经常被开发者混淆的概念，用于理解和操作网页元素在页面中的位置和尺寸。这些概念主要涉及元素在浏览器视口中的布局和滚动行为。 1. **offset**: - 偏移量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值