【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.mzph.cn/news/814822.shtml

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

相关文章

中国绿色技术助力全球能源转型(国际论坛)

中国的清洁能源发展战略和实践对全球能源结构转型产生了深远影响。作为全球最大的可再生能源生产和消费国&#xff0c;中国在推动国内可再生能源产业发展的同时&#xff0c;也积极与世界各国分享技术和经验&#xff0c;促进全球范围内清洁能源技术的普及和应用成本的降低。例如…

C 408—《数据结构》易错考点200题(含解析)

目录 Δ前言 一、绪论 1.1 数据结构的基本概念 : 1.2 算法和算法评价 : 二、线性表 2.2 线性表的顺序表示 : 2.3 线性表的链式表示 : 三、栈、队列和数组 3.1 栈 3.2 队列 3.3 栈和队列的应用 3.4 数组和特殊矩阵 四、串 4.2 串的模式匹配 五、树与二叉树 5.1 树的基…

解决 Mac App Store 不显示可用更新的问题

相信不少人遇到过 Mac App Store 有更新提示&#xff0c;但进入应用商店的「更新」一栏不会显示可用更新的软件列表。只有进入对应软件详情页才会显示可更新。 解决方法是使用快捷键「⌘ R」来刷新页面。 Related Link: Troubleshooting App Store Issues

Docker 安装 RocketMQ

目录 一、新建两个配置文件 1.1 创建docker-compose.yml文件 1.2 .新建broker.conf文件 二、运行 三、可视化界面 一、新建两个配置文件 1.1 创建docker-compose.yml文件 version: 3.5 services:rmqnamesrv:image: foxiswho/rocketmq:servercontainer_name: rmqnamesrvports…

Gradle 实战 - 命令行传递-ApiHug准备-工具篇-013

&#x1f917; ApiHug {Postman|Swagger|Api...} 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: 有爱&#xff0c;有温度&#xff0c;有质量&#xff0c;有信任ApiHug - API design Copilot - IntelliJ IDEs Plugin | Marketplace ApiHug …

人工智能科普:人工智能的分类

人工智能的分类多种多样&#xff0c;根据不同的标准和应用场景&#xff0c;可以将其划分为多个不同的类别。以下是对人工智能分类的详细探讨。 一、按应用领域分类 1. 智能机器人&#xff1a;智能机器人是人工智能技术在机器人领域的应用。它们能够根据环境和任务的不同进行自…

【论文速读】| 基于大语言模型的模糊测试技术

本次分享论文为&#xff1a;Large Language Models Based Fuzzing Techniques: A Survey 基本信息 原文作者&#xff1a;Linghan Huang, Peizhou Zhao, Huaming Chen, Lei Ma 作者单位&#xff1a;悉尼大学&#xff1b;东京大学&#xff1b;阿尔伯塔大学 关键词&#xff1a;…

DP算法的精髓是什么?

概述 DP(动态规划)通过将原问题拆分成一系列子问题&#xff0c;并通过对子问题求解。所以&#xff0c;也可以把DP算法定义为“多阶段决策最优解模型”&#xff08;决策树&#xff09; 同时该模型也具有以下明显特征&#xff1a; 问题的最优解包含子问题的最优解。反过来说的…

[全网最全]2024MathorCup妈妈杯ABCD题成品论文33页+配套完整代码数据汇总

所有题目的每一小问解答&#xff08;含配套代码和数据&#xff09;都已经更新完毕&#xff0c;其中C题成品论文33页更新&#xff0c;B题论文更新&#xff0c;A题半成品论文21页完整解答代码数据。 &#xff08;完整版的资料放在文末了&#xff09; A题 移动通信网络中PCI规划问…

使用云服务器搭建CentOS操作系统

云服务器搭建CentOS操作系统 前言一、购买云服务器腾讯云阿里云华为云 二、使用 XShell 远程登陆到 Linux关于 Linux 桌面下载 XShell安装XShell查看 Linux 主机 ip使用 XShell 登陆主机 三、无法使用密码登陆的解决办法 前言 CentOS是一种基于Red Hat Enterprise Linux&#…

Java入门学习Day05

本篇文章主要有创建package、关系运算符、逻辑运算符、三元运算符和其对应的实例。 一、创建package 创建一个包&#xff0c;把我们之前或之后用到的运算符代码都放到这个package里&#xff0c;方面管理。 包的命名通常是公司的网站名称倒着写(com.mayin)&#xff0c;再加上…

C语言 数据输入输出

本文 我们来说 数据的输入与输出 及数据的运算 在程序的运算工程中 往往需要输入一些数据 而程序的运算 所得到的运算结果又需要输出给用户 因此 数据的输入与输出 就显得非常重要 在C语言中 不提供专门的输入输出语句 所有的输入输出 都是通过对标准库的调用 来实现的 一般 …

电池电量监测系统设计 单片机+LabVIEW+Matlab+Protues+Keil程序

目录 前言 提供 软件 系统展示 1.放电试验及其处理 2.硬件系统原理图 3.下位机程序 4.显示 5.上位机界面 6.上位机程序 7.文档 资料下载地址&#xff1a;电池电量监测系统设计 单片机LabVIEWMatlabProtuesKeil程序 前言 这套系统首先使用Matlab分析获得了电压…

KL散度的非负性证明

KL散度主要是用于衡量两个分布之间的差异。KL散度的公式如下&#xff1a; 其中&#xff0c;p&#xff0c;q分别是两个分布&#xff0c;且有&#xff1a; 证明KL散度的非负性&#xff0c;即证明&#xff1a; 即证明&#xff1a; 即证明&#xff1a; 由吉布斯不等式可知&#…

大模型(Large Models):探索人工智能领域的新边界

&#x1f31f;文章目录 &#x1f31f;大模型的定义与特点&#x1f31f;模型架构&#x1f31f;大模型的训练策略&#x1f31f;大模型的优化方法&#x1f31f;大模型的应用案例 随着人工智能技术的飞速发展&#xff0c;大模型&#xff08;Large Models&#xff09;成为了引领深度…

[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…

Ja-netfilter(idea激活码破解原理)分析

Ja-netfilter&#xff08;idea破解&#xff09;分析 简介 ja-netfilter是一款可以破解jetbrainsIDE系列的javaagent jar 包。 原理简介 通过javaagent创造修改字节码的时机。通过asm修改相关类&#xff0c;达到hook特定方法的作用。主要依赖power&#xff08;rsa方法hook&a…

在 Google Cloud 上轻松部署开放大语言模型

今天&#xff0c;“在 Google Cloud 上部署”功能正式上线&#xff01; 这是 Hugging Face Hub 上的一个新功能&#xff0c;让开发者可以轻松地将数千个基础模型使用 Vertex AI 或 Google Kubernetes Engine (GKE) 部署到 Google Cloud。 Model Garden (模型库) 是 Google Clou…

2024认证杯数学建模C题思路模型代码

目录 2024认证杯数学建模C题思路模型代码&#xff1a;4.11开赛后第一时间更新&#xff0c;获取见文末名片 以下为2023年认证杯C题&#xff1a; 2024年认证杯数学建模C题思路模型代码见此 2024认证杯数学建模C题思路模型代码&#xff1a;4.11开赛后第一时间更新&#xff0c;获…

JavaScript进阶6之函数式编程与ES6ESNext规范

函数式编程 柯里化currycurrycompose示例&#xff1a;简化版展开写&#xff1a; debug示例一&#xff1a;示例二&#xff1a; 模板字符串css in js方案 箭头函数问题 生成器 generator应用场景 反射 Reflect 柯里化curry compose是curry的应用 在 lodash/fp underscore ramba …