client / page / offset / screen X / Y

最新推荐文章于 2024-01-20 06:00:00 发布

weixin_30488085

最新推荐文章于 2024-01-20 06:00:00 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/DB-IT/p/8451301.html

本文详细解释了客户端坐标系统中四个重要的概念：clientX/clientY、pageX/pageY、offsetX/offsetY 和 screenX/screenY 的含义及区别。具体阐述了它们在网页布局中的作用，特别是 pageX 与 clientX 在滚动条移动情况下的不同表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.clientX / clientY

　　相对于可视窗口左上角，不包括菜单栏与滚动条

2.pageX / pageY

　　相对于网页左上角，不包括菜单栏，包括滚动条

3.offsetX / offsetY

　　IE特有！

　　以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。

4.screenX / screenY

　　相对于屏幕左上角

pageX和clientX ,这个两个比较容易搞混,

pageX:与滚动条移动有关

clientX:与滚动条移动无关

转载于:https://www.cnblogs.com/DB-IT/p/8451301.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30488085

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

从 chromium源码中去除CEF对requestFullscreen()限制

04-27

657

目录修改位置1：修改位置2：测试文件： CEF收到OnFullscreenModeChange 回调后处理：在CEF中，调用requestFullscreen()时，会发现必须用户交互方式调用才行，会给出如下错误提示： Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture. 修改位置1： third_party/blink/render

一文搞懂offset client screen page等api

William526的博客

02-28

314

参与评论您还未登录，请先登录后发表或查看评论

page client screen offset 作用与区别

a177165515的博客

03-26

230

js测试代码：document.querySelector("body").onmouseup=function(e){ console.log(e.pageY) console.log(e.clientY) console.log(e.offsetY) console.log(e.screenY) this.scrollTop=0} pageY表示页面所有内容部位触发事件距...

client, offset, screen的区别

harold's blog

02-25

153

[color=blue]clientX[/color], [color=blue]clientY[/color]：是[color=red][b]鼠标当前相对于网页[/b][/color]的位置，当鼠标位于页面左上角时clientX=0, clientY=0； [color=blue]offsetX[/color], [color=blue]offsetY[/color]：是[...

offset、client、scroll、screen、page五大系列的区别（三）

老曹的博客

06-12

855

接上两篇文章，前面已经讲了offset系列和client系列，这篇文章主要讲scroll系列 scroll系列 ①scrollWidth / scrollHeight 元素内容实际宽度 / 高度（不包括border）分两种情况：这个元素内容的宽度 or 高度没有超过这个元素的宽 or 高，那么scrollWidth / scrollHeight指的就是这个元素的width + pad...

offset、client、scroll、screen、page五大系列的区别（二）

老曹的博客

06-08

970

上一篇主要讲述了offset系列，篇幅过长，所以每个系列单独放一篇文章吧，css代码和上一章节是一样的 client系列 ①clientX和clientY 获取鼠标指针位置相对于可视区域的 x 坐标和y坐标，也就是说是相对于浏览器的距离，跟触发事件的对象没关系代码如下： div1.onclick = function (e) { e = window.event || e; //...

强大的socat工具，可创建虚拟串口、在串口/网口间转发数据等，基本上无所不能的工具

哦，原来你也在这里。

01-20

1829

socat，一个强大的工具，串口工具

8K HDR!｜为 Chromium 实现 HEVC 硬解 - 原理/实测指南

字节跳动视频云

07-13

6725

如果有 HEVC 视频播放需求，不妨可以尝试一下 Chrome Canary 版本或预编译版本。

【2022跨年】最浪漫的表白烟花，送给新的一年的自己（源码）

热门推荐

m0_67391121的博客

03-06

3万+

先建立一个images文件夹：放入一张小表情图片：a8.png jquery.min.js： /*! jQuery v2.0.0 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license //@ sourceMappingURL=jquery.min.map */ (function(e,undefined){var t,n,r=typeof undefined,i=e.location,o=e.document,s=o.document.

五大位置offset,client,scroll,screen,page

qq_43712187的博客

12-22

543

文章目录一、偏移量offset二、client鼠标距离(不含边框)（获取边框的宽度）三、scroll四、page(文档坐标)这个当文档没有滑动条时候和client一样五、screen显示屏前言凡是事件中含有x和y的都是为了获取鼠标指针位置相对于触发事件的对象的位置，但是又各不相同一、偏移量offset //获取坐标节点.offsetLeft; 节点.offsetTop; 获取节点的大小节点.offsetWidth;（一个盒子的所有边框内边距和内容）节点.ofsetHeight；事件.off

移动端client，page，screen之间的区别

Tea_jacket的博客

07-06

1846

client是相对当时屏幕的距离屏幕顶部的距离 page是相对当时页面的内容原点，包含滚动的 screen是相对于屏幕原点的距离移动端很少用当页面的宽度和屏幕一样宽高时候client和page一样

page,client,offset,screen距离概念解释

ANNENBERG的博客

10-10

996

一、写在前面在阅读本文前，希望大家能针对每个属性亲手测试，网上现有的大量相关博客都有不等的概念错误，毕竟亲手实践才能更好的掌握这些概念。 1.pageX，clientX，screenX与offsetX 先统一了解下这四个概念，理解不透没关系，咱们把概念相近的对比着一一细说。 pageX：鼠标指针距离文档左侧边缘的距离，不随滚动条变化而变化。 clientX：鼠标指针距离可视窗口左侧边缘的距离，随滚动条变化而变化，如果拖动滚动条让元素距离可视窗口左侧越近，值越小。 screenX：鼠标指针距离屏

offset、client、scroll、screen、page五大系列的区别（一）

老曹的博客

06-08

3108

offset、client、scroll、screen的区别网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); ...

B站的基于python的Opencv项目实战-唐宇迪.zip

08-22

B站的基于python的Opencv项目实战-唐宇迪.zip

借助 LLaMA 3 等大模型，为全球百余种语言个性化学习提供支持的对话类 AI Agent，适用于全球旅行与生活场景

08-22

资源下载链接为： https://pan.quark.cn/s/538a38db2c7e 借助 LLaMA 3 等大模型，为全球百余种语言个性化学习提供支持的对话类 AI Agent，适用于全球旅行与生活场景（最新、最全版本！打开链接下载即可用！）

一个基于 Python 的网易云音乐-音乐合伙人任务脚本，支持本地运行和 GitHub Actions 自动执行。.zi

08-22

一个基于 Python 的网易云音乐-音乐合伙人任务脚本，支持本地运行和 GitHub Actions 自动执行。.zip

fuint餐饮系统是一套专为餐饮行业设计的开源会员管理与营销解决方案_基于Java_SpringBoot_MySQL_Redis_Uniapp_Element_UI技术栈_前后端分.zip

08-22

fuint餐饮系统是一套专为餐饮行业设计的开源会员管理与营销解决方案_基于Java_SpringBoot_MySQL_Redis_Uniapp_Element_UI技术栈_前后端分.zip

基于Python_PyQT5的产生式动物识别系统.zip