js中易弄混淆的"位置"相关属性详解
作者：April_zk 发布时间：2024-07-11 06:30:04
标签：javascript,位置,属性
一.Dom对象属性——距离
1.offsetLeft && offsetTop
offsetLeft //返回当前元素左边界到其上级元素(offsetParent)的左边界的距离【只读】
offsetTop //返回当前元素上边界到其上级元素(offsetParent)的上边界的距离【只读】
2. offsetWidth && offsetHeight
offsetWidth //返回元素的宽度，**包含边框**【只读】
offsetHeight //返回元素的高度，**包含边框**【只读】T
3.clientWidth && clientHeight
clientWidth //返回元素的高度，**【不】包含边框**
clientHeight //返回元素的宽度，**【不】包含边框**
4.scrollTop && scrollLeft
scrollTop //返回匹配元素的滚动条的垂直位置
scrollLeft //返回匹配元素的滚动条的水平位置
5.offsetParent
offsetParent //返回元素的偏移容器，即当前容器偏移对应的父容器
二.Bom对象属性——距离
1.width && height
screen.width //电脑屏幕的宽度
screen.height //电脑屏幕的高度
2.availWidth && availHeight
screen.availWidth //电脑屏幕的宽度【减去窗口工具条】
screen.availHeight //电脑屏幕的高度【减去窗口工具条】
三.Window对象属性——距离
2.innerWidth && innerHeight
window.innerWidth //浏览器窗口的内宽度
window.innerHeight //浏览器窗口的内高度
四.Event对象属性——坐标
1.offsetX && offsetY
offsetX //相对于元素的横坐标
offsetY //相对于元素的纵坐标
2.clientX && clientY
clientX //相对于浏览器窗口的横坐标
clientY //相对于浏览器窗口的纵坐标
3.pageX && pageY
pageX //相对于页面的横坐标
pageY //相对于页面的纵坐标
4.screenX && screenY
screenX //相对于电脑屏幕的横坐标
screenY //相对于电脑屏幕的纵坐标
【可以配合下面的图来进行理解坐标】
来源：https://blog.csdn.net/qq_45747074/article/details/123362248
0
投稿猜你喜欢
- 若是只引用jquery的话，监听单选按钮改变事件如下：<input type="radio" name="
1.模型类中设置:null=True,表示数据库创建时该字段可不填,用NULL填充.MySQL:Null这一列,如果值为YES表示:创建一条- 一、Celery介绍和基本使用 Celery 是一个 基于python开发的分布式异步消息任务队列，通过它可以轻松的实现任务的异步处理， 如
- 打开pycharm，程序某一行序号出出现书签bookmark，编号为9如果想要删除bookmark，将光标移至bookmark所在行，按快捷
- 1.多边形的绘制案例# 多边形的绘制案例import turtledef main():turtle.color("green&q
- 一、Vue3 与 Vue2 区别详述1. 生命周期对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “
- 前言:如何悄悄的打开朋友的摄像头，看看她最近过的怎么样，嘿嘿！这次让我带你们来实现这个功能。注： 这个程序仅限在朋友之间开玩笑，别去搞什么违
- 可以使用条件断点，如图，在断点上右键可以设置，条件自己输入，python语法：来源：https://blog.csdn.net/daijig
- 我们经常遇到各种字典套字典的数据，例如：nest_dict = { 'a': 1, 'b&#
- 本文通过一个案例来看看MySQL优化器如何选择索引和JOIN顺序。表结构和数据准备参考本文最后部分"测试环境"。这里主要
- （1） 单人脸情况import cv2import dlibpath = "1.jpg"img = cv2.imread
- 一、慢查询有什么用?它能记录下所有执行超过long_query_time时间的SQL语句, 帮你找到执行慢的SQL, 方便我们对这些SQL进
- 创建表：create table if not exists t( id int, addT
- Python是一个非常实用、流行的解释型编程语言，其优势之一就是可以借助其交互的shell进行探索式地编程。你可以试着输入一些代码，然后马上
- MySQL从5.1开始支持event功能，类似oracle的job功能。有了这个功能之后我们就可以让MySQL自动的执行数据汇总等功能，不用
- 该程序通过绘制树干（最初是树；后来是树枝）并递归地添加树来绘制“树”。 使用Pillow。利用递归函数绘制分形树（fractal tree)
- Django配合python进行requests请求前言在我们写代码的时候，经常会用到前后端分离开发的方法，例如微信小程序，安卓，网站等等&
- 前言sched是Python的内置模块，用于事件调度，可在安全的在多线程环境中轻松实现定时任务。sched是一种调度（延时处理机制）。sch
- 最近在使用Go语言搞一个用户登录&注册的功能，说到登录&注册相关，我们油然会产生一种增加验证码的想法，因此着手实现，后来在G
- Cookie是一种小型文本文件，存储在用户计算机中，用于跟踪用户在互联网上的活动。Cookie通常由网站创建，以便记住用户的偏好和登录状态，
