【CSS】一篇文章讲清楚screen、window和html元素的位置:top、left、width、height

        一个Web网页从内到外的顺序是:

元素div,ul,table... → 页面body → 浏览器window → 屏幕screen

分类详情
屏幕screen

srceen.width - 屏幕的宽度

screen.height - 屏幕的高度(屏幕未缩放时,表示屏幕分辨率)

screen.availLeft - 屏幕可用区域左边距离屏幕左边的距离

screen.availTop - 屏幕可用区域上边距离屏幕上边的距离

screen.availWidth - 屏幕可利用的宽度(screen.width - 任务栏高度<如果有>)

screen.availHeight -屏幕可利用的高度(screen.height - 任务栏高度<如果有>)

浏览器窗口window

window.screenLeft - 浏览器左边距离屏幕左边的距离

window.screenTop - 浏览器上边距离屏幕上边的距离

window.screenX - 同window.screenLeft,Firefox仅支持这种

window.screenY - 同window.screenTop,Firefox仅支持这种

window.outerWidth - 浏览器窗口的宽度

window.outerHeight - 浏览器窗口的高度

window.innerWidth - 浏览器窗口的内部宽度(页面可用宽度),含垂直滚动条宽度(window.outerWidth -工具栏宽度)

window.innerHeight - 浏览器窗口的内部高度(页面可用高度),含水平滚动条高度(window.outerHeight -工具栏宽度)

window.pageXOffset - 返回文档/页面水平方向已滚动的距离

window.pageYOffset - 返回文档/页面垂直方向已滚动的距离

window.scrollX - 同window.pageXOffset

window.scrollY - 同window.pageYOffset

页面body和元素

offsetParent - 返回该元素带有定位的父级元素,如果父级元素没有定位,则返回body

offsetLeft - 元素相对于其 offsetParent 的左边界的距离(包括外边距,不包括边框、内边距)

offsetTop - 元素相对于其 offsetParent 的上边界的距离(包括外边距,不包括边框、内边距)

offsetWidth - 返回元素包括内边距、边框、内容区的宽度,不包括外边距、滚动条

offsetHeight - 返回元素包括内边距、边框、内容区的高度,但不包括外边距、滚动条

clientLeft - 返回元素的左边框的宽度

clientTop  - 返回元素的上边框的宽度

clientWidth  - 返回元素包含内边距、内容区的宽度

clientHeight - 返回元素包含内边距、内容区的高度

document.body.scrollLeft - 被隐藏在内容区域左方的距离。设置该值可以改变元素的滚动位置

document.body.scrollTop - 被隐藏在内容区域上方的像距离。设置该值可以改变元素的滚动位置

document.body.scrollWidth - 返回元素整体的宽度,包括由于overflow溢出而在屏幕上不可见的内容(包含内边距,不包含外边距、边框)

document.body.scrollHeight - 返回元素整体的高度,包括由于overflow溢出而在屏幕上不可见的内容(包含内边距,不包含外边距、边框)

事件

e.screenX和e.screenY - 鼠标相对于用户显示器屏幕左上角的X,Y坐标。

e.clientX和e.clientY - 鼠标相对于浏览器窗口可视区域的坐标(窗口坐标),可视区域不包括工具栏和滚动条(event.x,event.y)

e.pageX和e.pageY - 类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。

e.offsetX和e.offsetY - 鼠标相对于事件源元素(srcElement)的坐标,只有IE事件有这2个属性,标准事件没有对应的属性

 

 

参考文章

clientX、offsetX、screenX、pageX的区别-CSDN博客

clientTop、offsetTop和scrollTop的区分 - 不肯融化的冰 - 博客园 (cnblogs.com)

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

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

相关文章

数据应用OneID:ID-Mapping Spark GraphX实现

前言 说明 以用户实体为例&#xff0c;ID 类型包含 user_id 和 device_id。当然还有其他类型id。不同id可以获取到的阶段、生命周期均不相同。 device_id 生命周期通常指的是一个设备从首次被识别到不再活跃的整个时间段。 user_id是用户登录之后系统分配的唯一标识&#xff…

嵌入式学习52-ARM1

知识零散&#xff1a; 1.flash&#xff1a; nor flash 可被寻地址 …

【智能优化算法】河马优化算法(Hippopotamus optimization algorithm,HO)

河马优化算法&#xff08;Hippopotamus optimization algorithm&#xff0c;HO&#xff09;是发表在中科院二区期刊“Scientific Reports”的文章“Hippopotamus Optimization Algorithm: a Novel Nature-Inspired Optimization Algorithm”上的算法。 01.引言 河马优化算法&a…

LeetCode 1 in Python. Two Sum (两数之和)

两数之和算法思想很简单&#xff0c;即找到nums[i]和nums[j]target-(nums[i])返回[I, j ]即可。问题在于&#xff0c;简单的两层遍历循环时间复杂度为O()&#xff0c;而通过构建一个hash表就可将时间复杂度降至O(n)。本文给出两种方法的代码实现。 示例&#xff1a; 图1 两数之…

【noVNC】使用noVNC实现浏览器网页访问vnc(基于web的远程桌面)

1.VNC本身提供的http连接方式&#xff0c;可传输文件&#xff0c;画面有卡顿&#xff0c;需要安装jre 2.noVNC访问方式&#xff0c;不可传输文件&#xff0c;画面较为流畅&#xff0c;不用安装插件运行环境 一、noVNC 是什么 Web 端的Vnc软件&#xff0c;通过noVNC&#xff0…

[C++]让C++的opencv库支持写出h264格式视频

当我们写下面测试代码时候&#xff1a; #include <opencv2/opencv.hpp>int main() {cv::VideoCapture cap("E:\\car.mp4"); // 打开默认摄像头if (!cap.isOpened()) {std::cout << "读取完毕!" << std::endl;return -1;}double fps ca…

基于FPGA的以太网相关文章导航

首先需要了解以太网的一些接口协议标准&#xff0c;常见的MII、GMII、RGMII时序&#xff0c;便于后续开发。 【必读】从MII到RGMII&#xff0c;一文了解以太网PHY芯片不同传输接口信号时序&#xff01; 介绍一款比较老的以太网PHY芯片88E1518&#xff0c;具有RGMII接口&#xf…

【鸿蒙开发】第二十章 Camera相机服务

1 简介 开发者通过调用Camera Kit(相机服务)提供的接口可以开发相机应用&#xff0c;应用通过访问和操作相机硬件&#xff0c;实现基础操作&#xff0c;如预览、拍照和录像&#xff1b;还可以通过接口组合完成更多操作&#xff0c;如控制闪光灯和曝光时间、对焦或调焦等。 2 …

【C语言基础】:编译和链接(计算机中的翻译官)

文章目录 一、翻译环境和运行环境1. 翻译环境1.1 编译1.1.1 预处理1.1.2 编译1.1.3 汇编 1.2 链接 2. 运行环境 一、翻译环境和运行环境 我们在Visual Studio上写的C语言代码其实都是一些文本信息&#xff0c;计算机是不能够直接执行他们的&#xff0c;计算机只能够执行二进制…

web自动化测试系列-selenium xpath定位方法详解(六)

1.xpath介绍 XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航。而html中也应用了这种语言 &#xff0c;所以 &#xff0c;我们定位html页面元素时也会用到xpath这种方法 。 2.xpath定位方式 xpath主要通过以下四种方法定位 &#…

Windows系统本地部署Jupyter Notebook并实现公网访问编辑笔记

文章目录 1.前言2.Jupyter Notebook的安装2.1 Jupyter Notebook下载安装2.2 Jupyter Notebook的配置2.3 Cpolar下载安装 3.Cpolar端口设置3.1 Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 在数据分析工作中&#xff0c;使用最多的无疑就是各种函数、图表、…

基于深度学习的智能停车场车牌识别计费系统(完整程序+训练数据集+开题报告+论文))

摘要 本篇论文研究的是基于车牌识别技术的智能停车场管理系统&#xff0c;采用基于深度学习的车牌识别算法&#xff0c;通过卷积神经网络对车牌图像进行处理和分析&#xff0c;实现车牌字符的识别和车牌信息的提取。同时&#xff0c;本文还设计了一个智能停车场管理系统&#x…

RTSP/Onvif视频安防监控平台EasyNVR调用接口返回匿名用户名和密码的原因排查

视频安防监控平台EasyNVR可支持设备通过RTSP/Onvif协议接入&#xff0c;并能对接入的视频流进行处理与多端分发&#xff0c;包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等多种格式。平台拓展性强、支持二次开发与集成&#xff0c;可应用在景区、校园、水利、社区、工地等场…

[opencv]VideoWriter写出fourcc格式

fourcc支持的格式 fourcc全名Four-Character Codes&#xff0c;四字符代码&#xff0c;该编码由四个字符组成 cv2.VideoWriter_fourcc(O,O,O,O) cv2.VideoWriter_fourcc(*OOOO) 通常写法有上述两种形式&#xff0c;O代表一个字符&#xff0c;通常有 支持avi格式的有&#…

react17+18 中 setState是同步还是异步更新

在类组件中使用setState&#xff0c;在函数式组件中使用hooks的useState。 setstate目录 1. 类组件1.1 react 17版本1.2 react 18版本 2、函数式组件 1. 类组件 1.1 react 17版本 参考内容&#xff1a;第十一篇&#xff1a;setState 到底是同步的&#xff0c;还是异步的&…

Java 集合Collection

集合的体系 Collection的结构体系 List系列集合&#xff1a;添加的元素是有序的、可重复、有索引。Set系列集合&#xff1a;无序、不重复、无索引 HashSet&#xff1a;无序、不重复、无索引LinkedHashSet:有序、不重复、无索引TreeSet&#xff1a;按照大小默认升序排序、不重复…

数据结构--单链表

一.单链表的设计 1.单链表的结构定义: typedef struct Node{ int data;//数据域 struct Node* next;//后继指针 }Node,*List; 2.单链表的设计示意图: 3.注意: 单链表的最后一个节点的next域为NULL; 4.为什么要有一个头节点? 简单方便,不用传二级指针; 二.单链表的实现 …

韩顺平 | 零基础快速学Python(9~11) 排序查找

排序和查找 排序 排序&#xff1a;将多个数据按顺序排列。有冒泡、选择、插入、希尔、归并、快速、堆、计数、捅、基数排序。 冒泡排序 冒泡排序 Bubble Sorting&#xff1a;重复地走访需要排序地元素列表&#xff0c;依次比较相邻的元素&#xff0c;如果顺序错误就交换位置…

SSH穿透ECS访问内网RDS数据库

处于安全考虑&#xff0c;RDS一般只会允许指定的IP进行访问&#xff0c;而我们开发环境的IP往往是动态的&#xff0c;每次IP变动都需要去修改RDS的白名单&#xff0c;为我们的工作带来很大的不便。 那么如何去解决这个问题&#xff1f; 假如我们有一台ESC服务器&#xff0c;E…

简介:基于Web的产品3D

基于 Web 的产品 3D 通过可视化界面获得各种选项来个性化他们的产品&#xff0c;例如颜色、材料、尺寸、文字、徽标、零件等。 在过去几年中&#xff0c;随着 3D 建模和渲染软件的出现&#xff0c;3D 渲染现在更常用于营销和促销目的。设计师、制造商和营销人员使用 3D 产品渲…