offsetX、offsetY...

文章目录

    • offsetX & offsetY
    • clientX & clientY
    • pageX & pageY
    • screenX & screenY
    • innerHeight & innerWidth
    • offsetHeight & offsetWidth
    • offsetTop & offsetLeft
    • scrollHeight & scrollWidth
    • scrollTop & scrollLeft:
    • 与scrollHeight和scrollWidth的区别
    • 浏览器窗口客户端区域:

offsetX & offsetY

鼠标事件或者触发事件相对于事件的元素左边缘的水平和垂直偏移量 (就是以当前触发的元素为基底,鼠标位于你触发元素所在的位置)

clientX & clientY

是指鼠标事件在浏览器可视窗口的位置

pageX & pageY

是指鼠标事件在浏览器整个页面中(包括滚动部分)的中的位置

screenX & screenY

是一个用于获取浏览器窗口相对于屏幕左上角的水平/垂直坐标位置的属性。
screenX 属性通常用于确定浏览器窗口在屏幕上的位置,或者与其他元素的位置进行比较。例如,可以使用 screenX 属性来确定浏览器窗口在屏幕上的水平位置,以便在特定位置显示其他元素。

innerHeight & innerWidth

指整个浏览器可视窗口的大小 不包括浏览器的工具栏、地址栏等

offsetHeight & offsetWidth

返回触发元素的的像素的高度/宽度,包括该元素的高度的垂直的内边距和边框 且是一个整数
在这里插入图片描述

offsetTop & offsetLeft

表示元素的上外边/左边框至offsetParent元素的上内边框/左边框之间的像素距离(若无父元素则以浏览器为offsetParent)

scrollHeight & scrollWidth

表示元素的滚动内容的总高度/宽度 包括被隐藏的内容,即使在可见区域外也会计算在内。如果元素没有发生垂直滚动,则 scrollHeight 的值等于元素的实际高度。可以通过设置元素的滚动位置(scrollTop)来访问超出可见范围的内容。

scrollTop & scrollLeft:

表示被隐藏在内容区域的上方/左边的高度/宽度

与scrollHeight和scrollWidth的区别

scrollTop和scrollWidth一般用于获取或者设置元素的滚动位置 ,而scrollHeight和scrollWidth用于获取元素内容的完整的高度
在这里插入图片描述

浏览器窗口客户端区域:

浏览器窗口客户区域指的是浏览器窗口中用于显示网页内容的区域,即不包括浏览器工具栏、标签栏、地址栏和滚动条等部分。它是网页可视区域的一部分。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/148138.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

二分查找算法(3) _x的平方根

个人主页:C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 二分查找算法(3) _x的平方根 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记,欢迎大家在评论区交流讨论💌 目录 温馨…

《深度学习》—— 卷积神经网络(CNN)的简单介绍和工作原理

文章目录 一、卷积神经网络的简单介绍二、工作原理(还未写完)1.输入层2.卷积层3.池化层4.全连接层5.输出层 一、卷积神经网络的简单介绍 基本概念 定义:卷积神经网络是一种深度学习模型,通常用于图像、视频、语音等信号数据的分类和识别任务。其核心思想…

MIPI协议

MIPI协议 MIPI介绍协议层显示接口(Display)DBI(Display Bus Interface)并行传输串行传输 DPI(Display Pixel Interface,也称RGB接口)DSI(Display Serial Interface)Appli…

关于使用低版本EPLAN打开高版本项目中的一些常见问题!

目录 1 前言 2 操作方法 2.1 经典版本 2.2 新版本 3 遇到的问题 4 结语 1 前言 在用EPLAN设计图纸时,经常要遇到使用低版本EPLAN打开高版本EPLAN的项目。 EPLAN软件根据操作界面的不同可以分为两种: 1,EPLAN 2.x版本,比如经典的2.9和2…

【Python报错已解决】TypeError: ‘<‘ not supported between instances of ‘str‘ and ‘int‘

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 专栏介绍 在软件开发和日常使用中,BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…

从规范到实现解读Windows平台如何播放RTSP流

RTSP播放器应用场景 RTSP播放器在视频监控、远程视频会议、网络电视、实时流媒体传输、协同操控相关的智能设备、教育培训以及企业内部通讯与协作等多个领域都有着广泛的应用场景。 1. 视频监控 RTSP直播播放器在视频监控系统中扮演着重要角色。通过RTSP协议,播放…

ComfyUI生成头像

一、下载分享的网盘资源 链接:https://pan.quark.cn/s/706965ed07b5二、解压ComfyUI整合包 找个路径解压整合包,如下图 三、移动model文件 把boleromixPony_v14.safetensors放在Comfyui\ComfyUI\models\checkpoints目录下四、移动lora文件 把从0开始…

【MATLAB源码-第268期】基于simulink的永磁同步电机PMSM双闭环矢量控制系统SVPWM仿真,输出转速响应曲线。

操作环境: MATLAB 2022a 1、算法描述 永磁同步电机(PMSM)是目前工业领域中广泛使用的一种高效电机,其具有高功率密度、运行效率高、动态响应快等优点。在控制永磁同步电机时,通常采用矢量控制(也称为磁场…

MK-1000门控管理系统

MK-1000门控系统简介 1.1 前言 中大型仓库一般由多个仓库组成,每个仓库具有上百个仓库门,人工控制仓库门的开启、闭合等耗时耗力,随着电子信息自动化发展,集中控制仓库门成为现实。本系统可通过网络灵活控制某个仓库的某个门开启、…

萤石云平台接入SVMSPro平台

萤石云平台接入SVMSPro平台 步骤一:进入萤石云官网:https://open.ys7.com/ ,点右上角的登陆,填写自己的用户名密码; 步骤二:登陆进去后,开发者服务—>我的账号—>应用信息,在…

nonlocal本质讲解(后篇)——从Nonlocal均值滤波到Transformer的自注意力

Nonlocal均值滤波 → \rightarrow →Nonlocal attention → \rightarrow →Transformer的自注意力 目录 Nonlocal均值滤波Nonlocal attention矩阵表示,这只是为了实现。reshape矩阵运算 相异度矩阵相似度计算1. Gaussian Function(高斯函数)…

双指针算法介绍与简单运用

双指针算法 一、双指针算法介绍二、常用方法讲解交换力扣:283.移动零大小分类 覆盖力扣:88. 合并两个有序数组C语言 memmove 函数实现 快慢链表的中间结点力扣:141. 环形链表 对撞力扣:9. 回文数力扣:LCR 139. 训练计划…

专业学习|《随机过程》学习笔记(二)(定义、分类及相关过程)

一、随机过程 (一)随机过程定义 (1)基本概念 随机过程是随机变量的延伸。 (2)描述随机过程的方法 (3)随机过程的分类和举例 (4)随机过程的数字特征 随机过…

SpringSecurity -- 入门使用

文章目录 什么是 SpringSesurity ?细节使用方法 什么是 SpringSesurity ? 在我们的开发中,安全还是有些必要的 用 拦截器 和 过滤器 写代码还是比较麻烦。 SpringSecurity 是 SpringBoot 的底层安全默认选型。一般我们需要认证和授权&#xf…

Python文件读取

文件操作的步骤 打开文件读写文件关闭文件 open()打开函数 使用open()可以打开一个已经存在的文件,或者创建一个新文件 open(name,mode,encoding)name:打开文件的文件名,也可以包含具体路径 mode:设置打开文件的模式:只读、写入、追加等…

SpringBoot实战(三十)发送HTTP/HTTPS请求的五种实现方式【下篇】(Okhttp3、RestTemplate、Hutool)

目录 一、五种实现方式对比结果二、Demo接口地址实现方式三、Okhttp3 库实现3.1 简介3.2 Maven依赖3.3 配置文件3.4 配置类3.5 工具类3.6 示例代码3.7 执行结果实现方式四、Spring 的 RestTemplate 实现4.1 简介4.2 Maven依赖4.3 配置文件4.4 配置类4.5 HttpClient 和 RestTemp…

【LLM论文日更】| 俄罗斯套娃嵌入模型

论文:https://proceedings.neurips.cc/paper_files/paper/2022/file/c32319f4868da7613d78af9993100e42-Paper-Conference.pdf代码:GitHub - RAIVNLab/MRL: Code repository for the paper - "Matryoshka Representation Learning"机构&#x…

线程池动态设置线程大小踩坑

在配置线程池核心线程数大小和最大线程数大小后,如果调用线程池setCorePoolSize方法来调整线程池中核心线程的大小,需要特别注意,可能踩坑,说不定增加了线程让你的程序性能更差。 ThreadPoolExecutor有提供一个动态变更线程池核心…

linux中vim编辑器的应用实例

前言 Linux有大量的配置文件,其中编辑一些配置文件,最常用的工具就是 Vim ,本文介绍一个实际应用的Vim编辑器开发文档的实例。 Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性。…

单片机原理及应用详解

目录 1. 什么是单片机? 2. 单片机的基本组成 3. 单片机的工作原理 4. 常见的单片机分类 5. 单片机的应用领域 6. 单片机开发流程 7. 单片机开发中的常见问题及解决方案 8. 单片机的未来发展趋势 9. 总结 1. 什么是单片机? 单片机(Mi…