有趣且重要的JS知识合集(20)screen/client/scroll/offset等坐标属性知识点

1、线上链接地址

浏览器坐标属性

2、screen系列 

2.1、screenX:

鼠标位置相对于用户屏幕水平偏移量

2.2、screenY:

鼠标位置相对于用户屏幕垂直偏移量

3、client系列

3.1、clientX:

鼠标位置相对于文档的左边距(不随页面滚动而改变)

3.2、clientY:

鼠标位置相对于文档的上边距(不随页面滚动而改变)

3.3、clientHeight:

表示元素节点的 CSS 高度(单位像素),只对块级元素生效,对于行内元素返回0。如果块级元素没有设置 CSS 高度,则返回实际高度

clientHeight = height + padding

3.4、clientWidth:

表示元素节点的 CSS 宽度(单位像素),只对块级元素有效,对于行内元素返回0。也是只包括元素本身的宽度和padding,如果有垂直滚动条,还要减去垂直滚动条的宽度

clientWidth = width + padding

3.5、clientLeft:

元素节点左边框(left border)的宽度(单位像素),不包括左侧的padding和margin。如果没有设置左边框,或者是行内元素(display: inline),该属性返回0

3.6、clientTop:

元素节点顶部边框的宽度(单位像素),不包括顶部的padding和margin。如果没有设置上边框,或者是行内元素(display: inline),该属性返回0

4、scroll系列

4.1、scrollWidth:

获取元素整个内容的宽度 (包含看不见的) ,如果有滚动条(滚动条会占用部分宽高),不计算滚动条的宽高

4.2、scrollHeight:

获取元素整个内容的高度 (包含看不见的) ,如果有滚动条(滚动条会占用部分宽高),不计算滚动条的宽高

4.3、scrollTop(可读写):

表示当前元素的垂直滚动条向下侧滚动的像素数量

4.4、crollLeft(可读写):

表示当前元素的滚动水平滚动条向右的像素数量

判断滚动条垂直是否滚动到底 垂直滚动条 scrollHeight -scrollTop = clientHeight

判断滚动条水平是否滚动到底 水平滚动条 scrollWidth -scrollLeft = clientWidth

5、offset系列

5.1、offsetX:

鼠标位置相对被触发dom的左上角的水平距离,以内容区左上角为基准点(不包括边框),如果触发点在边框上会返回负值

5.2、offsetY:

鼠标位置相对被触发dom的左上角的垂直距离,以内容区左上角为基准点(不包括边框),如果触发点在边框上会返回负值

5.3、offsetHeight:

表示元素的 CSS 垂直高度(单位像素),包括元素本身的高度、padding 和 border,以及水平滚动条的高度(如果存在滚动条), 如果元素的 CSS 设为不可见(比如display: none;),则返回0

offsetHeight = height + border + padding

5.4、offsetWidth:

表示元素的 CSS 水平宽度(单位像素),包括元素本身的宽度、padding 和 border,以及垂直滚动条的宽度(如果存在滚动条), 如果元素的 CSS 设为不可见(比如display: none;),则返回0

offsetWidth = width + border + padding

5.5、offsetParent:

返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素

5.6、offsetLeft:

当前元素和定位父元素之间的偏移量(如果没有设置定位父元素,就是相对于左上角的位置,left是最左边的距离)

5.7、offsetTop:

当前元素和定位父元素之间的偏移量(如果没有设置定位父元素,就是相对于左上角的位置,top是距离顶部的距离)

6、其他

注意:当浏览器body出现滚动条时,pageY和clientY才不一致!

6.1、pageX:

鼠标位置相对于文档的左边距(随页面滚动而改变)

e.pageX = e.clientX + e.target.scrollLeft;

6.2、pageY:

鼠标位置相对于文档的上边距(随页面滚动而改变)

e.pageY = e.clientY + e.target.scrollTop;

6.3、layerX:

有定位属性的父元素的左上角的水平距离(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角(包含边框)

6.4、layerY:

有定位属性的父元素的左上角的垂直距离(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角(包含边框)

6.5、getBoundingClientRect:

用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗(可视范围)的位置

getBoundingClientRect方法的所有属性,都把边框(border属性)算作元素的一部分

  • x:元素左上角相对于视口的横坐标
  • y:元素左上角相对于视口的纵坐标
  • height:元素高度
  • width:元素宽度
  • left:元素左上角相对于视口的横坐标,与x属性相等
  • right:元素右边界相对于左边视口的横坐标(等于x + width)
  • top:元素顶部相对于视口的纵坐标,与y属性相等
  • bottom:元素底部相对于上边视口的纵坐标(等于y + height)

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

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

相关文章

【目标检测经典算法】R-CNN、Fast R-CNN和Faster R-CNN详解系列三:Faster R-CNN图文详解

【目标检测经典算法】R-CNN、Fast R-CNN和Faster R-CNN详解系列二:Fast R-CNN图文详解 概念预设 感受野 感受野(Receptive Field) 是指特征图上的某个点能看到的输入图像的区域。 神经元感受野的值越大表示其能接触到的原始图像范围就越大,也意味着它…

LeetCode链表hard 有思路?但写不出来?

给你链表的头节点 head ,每 k 个节点一组进行翻转,请你返回修改后的链表。 k 是一个正整数,它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍,那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节点内部的值…

用docker启动centos的桌面环境

最近在dockerhub看见centos的桌面镜像 拉取镜像:docker pull kasmweb/centos-7-desktop:1.14.0 VNC_PWpassword输入你自己的密码 运行容器:docker run --rm -it --shm-size512m -p 6901:6901 -e VNC_PWpassword kasmweb/centos-7-desktop:1.14.0 该镜…

Python 实现1~100之间的偶数求和

result0 for i in range(101):if i%20:result result i print(result) 或者 result0 for i in range(2,101,2):result result i print(result)

【附下载】3Ds Max从安装、配置到入门提高和高级用法

#3Ds Max 一、安装 1.1 安装说明 地址:链接:https://pan.baidu.com/s/1lwKMbgbE32wCL6PpMv706A?pwddll8 提取码:dll8 –来自百度网盘超级会员V2的分享 安装说明:文件夹里有安装说明 安装解压即可 关键就是将crack文件放到自己…

LVS+Keepalived 高可用群集--部署

实际操作 LVS Keepalived 高可用群集 环境设备 LVS1192.168.6.88 (MASTER)LVS2192.168.6.87 (BACKUP)web1192.168.6.188web2192.168.6.189客户端192.168.6.86VIP192.168.6.180 (一)web服务器 首先配置…

鸿蒙Harmony应用开发—ArkTS声明式开发(绘制组件:Polygon)

多边形绘制组件。 说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Polygon(value?: {width?: string | number, height?: string | number}) 从API version 9开始&#xff0…

软件杯 深度学习 python opencv 火焰检测识别 火灾检测

文章目录 0 前言1 基于YOLO的火焰检测与识别2 课题背景3 卷积神经网络3.1 卷积层3.2 池化层3.3 激活函数:3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 YOLOV54.1 网络架构图4.2 输入端4.3 基准网络4.4 Neck网络4.5 Head输出层 5 数据集准备5.1 数…

注册-前端部分

前提:后端jar环境、Vue3环境、Redis环境 搭建页面(html标签、css样式) → 绑定数据与事件(表单校验) → 调用后台接口(接口文档、src/api/xx.js封装、页面函数中调用) Login.vue文件&#xff…

CentOS的安装

一、打开VMware的WorkStation的软件界面。点击创建新的虚拟机。 二、我们选择自定义,下一步。 三、这个界面不用动,直接进入下一步。 四、点击稍后安装操作系统,下一步。 五、选择Linux操作系统,版本为CentOS 7 64位。 六、虚拟机…

Day69:WEB攻防-Java安全JWT攻防Swagger自动化算法签名密匙Druid泄漏

目录 Java安全-Druid监控-未授权访问&信息泄漏 黑盒发现 白盒发现 攻击点 Java安全-Swagger接口-导入&联动批量测试 黑盒发现 白盒发现 自动化发包测试 自动化漏洞测试 Java安全-JWT令牌-空算法&未签名&密匙提取 识别 JWT 方式一:人工识…

前端 -- 基础 表单标签 -- 表单域

表单域 # 表单域是一个包含 表单元素 的区域 在 HTML 标签中&#xff0c; <form> 标签 用于定义表单域&#xff0c; 以实现用户信息的收集和传递 简单通俗讲&#xff0c; 就是 <form> 会把它范围内的表单元素信息提交给后台&#xff08;服务器) 对于上面讲…

24计算机考研调剂 | 【官方】桂林理工大学(11自命题、22自命题)

桂林理工大学信息工程与科学学院招收调剂 考研调剂补充信息 一、招收专业 计算机科学与技术&#xff08;学硕&#xff09;、软件工程&#xff08;学硕&#xff09;、计算机技术&#xff08;专硕&#xff09;、人工智能&#xff08;专硕&#xff09;、软件工程&#xff08;专…

php版本的AI电话机器人系统有哪些优势

PHP版本的AI电话机器人系统具有以下优势&#xff1a; 提升客户体验&#xff1a;AI电话机器人能够为客户提供724小时的服务&#xff0c;无论何时客户有疑问或需要帮助&#xff0c;都可以得到及时响应1。 提高工作效率和客户满意度&#xff1a;AI电话机器人系统具有智能回答问题…

【Sass】1px分割线 + 缩进分割线

效果图 1. 亮色模式效果 2. 暗色模式效果 设计思路 配色使用grey色 优点&#xff1a;无论在暗色模式还是亮色模式都可以看清楚分割线 使用after,before 伪元素绘制线条&#xff0c;并压缩线条transform: scaleY(.25) 注意事项 必须确保父级有宽高父级定位必须为position: r…

2、RabbitMQ_安装

RabbitMQ安装文档 RabbitMQ官网下载地址&#xff1a;https://www.rabbitmq.com/download.html 1.安装依赖 在线安装依赖环境&#xff1a; yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make gcc gcc-c kernel-devel m4 ncurses-devel tk tc x…

2025张宇考研数学基础36讲,视频百度网盘+PDF

一、张宇老师全年高数体系&#xff08;听课用书指南&#xff09; 25张宇全程&#xff1a; docs.qq.com/doc/DTmtOa0Fzc0V3WElI 复制粘贴在浏览器上打开&#xff0c;就可以看到2025张宇的全部的啦&#xff01; 一般来说我们把考研数学划分为3-4个阶段&#xff0c;分别是基础阶…

CSS详细教程

文章目录 前言一、CSS应用方式1.在标签上2.在head标签的style上3.写在文件中 二、选择器1.ID选择器2.类选择器3.标签选择器4.属性选择器5.后代选择器6.样式覆盖 三、CSS样式1.高度和宽度2.块级标签和行内标签转换3.字体颜色/大小/粗细/样式/对齐/边框4.浮动5.背景色6.内边距7.边…

IDEA上的Scala环境搭建

Scala环境搭建 一、搭建Scala开发环境 安装Scala编译器 安装scala-2.12.10.msi 检查scala安装情况 在dos窗口输入scala&#xff0c;检查是否能够进入编译器。进行简单的scala命令计算 在IDEA中进行scala编码 File - Settings - Plugins - MarketPlace中搜索scala插件 安…

总结mac下解决matplotlib中文显示问题的几种方法

一、前言&#xff1a; 使⽤matplotlib画图时&#xff0c;由于matplotlib默认没有中⽂&#xff0c;显⽰中文时会出现空⽩⼩⽅块。 二、方法&#xff1a; 2.1 matplotlib中使用SimHei字体 1&#xff09;进入终端后查看matplotlib的字体路径&#xff1a; $ python >>&g…