offsetX、offsetY...

news2024/9/23 10:33:53

文章目录

    • 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.coloradmin.cn/o/2157318.html

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

相关文章

图为科技大模型一体机,智领未来社区服务

当AI与边缘计算相遇,一幅关于智慧生活的宏伟蓝图正缓缓展开。 今天,让我们一同探索,如何通过图为大模型一体机,为物业服务插上智能的翅膀。 通过整合采集物业数据,大模型一体机可全方位为物业行业赋能,实…

Vue3实现类ChatGPT聊天式流式输出(vue-sse实现)

1. 效果展示 流式输出 直接输出 2. 核心代码 找了一些示例与AI生成的代码,或多或少有些问题,搞了好久,郁闷~,在此记录下 2.1 依赖安装 npm install vue-sse2.2 改写main.ts import VueSSE from vue-sseconst app Vue.cre…

ubuntu+MobaXterm+ssh+运行Qt(成功版)

点击上方"蓝字"关注我们 01、ubuntu连接SSH >>> 通过串口工具连接ubuntu 登录 解决连接不上的问题 检查 SSH 服务:确保目标机器上 SSH 服务已启动。你可以在目标机器上运行以下命令: sudo systemctl status ssh 如果没有运行,可以使用以下命令启动 SSH …

解锁2024年翻译在线Top4,让每一次交流都精准无误

现在世界就像个大家庭,交流多了,语言不通就成了问题。有道翻译在线就像桥梁,帮我们和全世界的朋友沟通。对企业来说,翻译准确太重要了,一句话翻错可能损失巨大。有道翻译在线技术强,各种语言都能搞定&#…

简述混沌神经网络

混沌神经网络是一种结合了神经网络与混沌理论的新型智能信息处理系统。以下是对混沌神经网络的详细解析: 一、定义与背景 混沌神经网络是由于神经网络具有高度非线性动力学系统的特性,而混沌又具有无规则性、遍历性、随机性等特点,因此神经网…

快递物流查询-快递查询-快递单号查询-快递物流单号查询-快递物流轨迹查询-快递物流查询接口

快递物流查询接口(API)是一种允许开发者通过编程方式实时查询快递物流信息的服务。这些接口通常集成了多家快递公司的物流数据,为电商平台、物流管理系统、个人用户等提供便捷的物流查询服务。以下是关于快递物流查询接口的一些详细介绍&…

【通讯协议】S32K142芯片——LIN通信的学习和配置

文章目录 前言1.LIN是什么?2. LIN连接结构及节点构成3. 帧的组成3.1 帧头3.1.1 同步间隔场(Break)3.1.2 同步场(Synch)3.1.3 标识符场(PID) 3.2 帧响应3.2.1 数据场3.2.2 校验和场 3. 代码配置总…

「C++系列」动态内存

【人工智能教程】,前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。 点击跳转到网站:【人工智能教程】 文章目录 一、动态内存1. 使用new和delete①分配单个对象②分配对象数组 2. …

深入理解MySQL InnoDB中的B+索引机制

目录 一、InnoDB中的B 树索引介绍 二、聚簇索引 (一)使用记录主键值的大小进行排序 页内记录排序 页之间的排序 目录项页的排序 (二)叶子节点存储完整的用户记录 数据即索引 自动创建 (三)聚簇索引…

[数据结构与算法·C++] 笔记 1.5 流

流 标准输入输出流 标准输入流 cin>>x 读入整型数时以第一个非数字为终结读入字符串时以第一个空格、tab 或换行符为终结 其它方法 标准输出流 cout<<y cout 输出到标准设备cerr 输出错误信息clog 输出错误日志 输出不同进制 hex -> 16 进制dec -> 10 …

windows cuda12.1 pytorch gpu环境配置

安装cuda12.1 nvcc -V conda创建pythong3.10环境 conda create -n llama3_env python3.10 conda activate llama3_env 安装pytorch conda install pytorch torchvision torchaudio pytorch-cuda11.8 -c pytorch -c nvidia gpu - Pytorch version for cuda 12.2 - Stack Ov…

Stable Diffusion WebUI Forge 支持 Flux 了!

大家好&#xff0c;我是每天分享AI应用的萤火君&#xff01; Flux横空出世有段时间了&#xff0c;模型效果也得到了广泛的认可&#xff0c;但是 Stable Diffusion WebUI 官方迟迟没有跟进&#xff0c;据说是因为要修改很多底层的处理机制&#xff0c;加之ComfyUI如火如荼&…

鸿蒙OpenHarmony【轻量系统内核扩展组件(CPU占用率)】子系统开发

基本概念 CPU&#xff08;中央处理器&#xff0c;Central Processing Unit&#xff09;占用率分为系统CPU占用率和任务CPU占用率。 系统CPU占用率&#xff1a;是指周期时间内系统的CPU占用率&#xff0c;用于表示系统一段时间内的闲忙程度&#xff0c;也表示CPU的负载情况。系…

iOS 中 KVC 与 KVO 底层原理

KVC 本质&#xff1a; [object setValue: forKey:];即使没有在.h 文件中有property 的属性声明&#xff0c;setValue:forKey依然会按照上图流程执行代码 KVC 如果成功改变了成员变量&#xff0c;是一定可以被 KVO 监听到成员变量的前后改变的 KVO runtime会生成中间类&…

EmguCV学习笔记 C# 12.3 OCR

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…

ActiveMQ 的消息持久化策略

ActiveMQ 的消息持久化策略 消息持久化对于可靠消息传递来说是一种比较好的方法&#xff0c;即使发送者和接受者不是同时在线&#xff0c;或者消息中心在发送者发送消息后宕机了&#xff0c;消息中心重启后仍然可以将消息发送出去。 消息持久性的原理很简单&#xff0c;就是在发…

[Linux] 通透讲解 什么是进程

标题&#xff1a;[Linux] 通透讲解 什么是进程 个人主页&#xff1a;水墨不写bug &#xff08;图片来自网络&#xff09; 目录 一.深入进程基本概念 二.管理好进程 1.管理好进程的方法 2.描述进程-PCB 3.组织进程 正文开始&#xff1a; 本文按照对进程的先描述再组织进行…

C++之模版的进阶

1.非类型模版参数 模版参数分类类型与非类型形形参 类型形参&#xff1a;出现在模版参数列表中&#xff0c;跟在class或者typename之类的参数类型名称。 非类型形参&#xff1a;用一个常亮作为类&#xff08;函数&#xff09;模版的一个参数&#xff0c;在类&#xff08;函数…

股指期货交割方式是什么?

说起股指期货&#xff0c;这可是个高大上的金融玩意儿。咱们平时买卖股票&#xff0c;那是看准了哪只股就下手&#xff0c;赚了就卖&#xff0c;赔了就扛&#xff0c;挺直接的。但股指期货呢&#xff0c;它玩的是未来的预期&#xff0c;就像是你跟人打赌明天天气好不好&#xf…

Fyne ( go跨平台GUI )中文文档-Fyne总览(二)

本文档注意参考官网(developer.fyne.io/) 编写, 只保留基本用法 go代码展示为Go 1.16 及更高版本, ide为goland2021.2​​​​​​​ 这是一个系列文章&#xff1a; Fyne ( go跨平台GUI )中文文档-入门(一)-CSDN博客 Fyne ( go跨平台GUI )中文文档-Fyne总览(二)-CSDN博客 Fyne…