【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)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

(一)基于IDEA的JAVA基础13

数组遍历 遍历数组就是把数组内的数据一个个的取出来 1.我们可以用for循环&#xff0c;依次把数字类的元素取出来。 2.增强型for循环。 用第一个方法写一下&#xff0c;看一下 public class Test01 { public static void main(String[] args) { //存储一组数据{…

TQ15EG开发板教程:在MPSOC上运行ADRV9009

首先需要在github上下载两个文件&#xff0c;本例程用到的文件以及最终文件我都会放在网盘里面&#xff0c; 地址放在最后面。在github搜索hdl选择第一个&#xff0c;如下图所示 GitHub网址&#xff1a;https://github.com/analogdevicesinc/hdl/releases 点击releases选择版…

【C++题解】1005 - 已知一个圆的半径,求解该圆的面积和周长

问题&#xff1a;1005 - 已知一个圆的半径&#xff0c;求解该圆的面积和周长 类型&#xff1a;基础问题、小数运算 题目描述&#xff1a; 已知一个圆的半径&#xff0c;求解该圆的面积和周长。 输入&#xff1a; 输入只有一行&#xff0c;只有 1 个整数。 输出&#xff1a…

迭代器模式【行为模式C++】

1.简介 迭代器模式是一种行为设计模式&#xff0c; 让你能在不暴露集合&#xff08;聚合对象&#xff09;底层表现形式 &#xff08;列表、 栈和树等&#xff09; 的情况下遍历集合&#xff08;聚合对象&#xff09;中所有的元素。 迭代器的意义就是将这个行为抽离封装起来&a…

【大厂生产案例】JVM调优

写作目的 最近上线了一个需求&#xff0c;遇到了一个JVM报警的问题&#xff0c;很荣幸能遇到&#xff0c;在此分享一下整个调优的过程。 背景 我们是中台服务&#xff0c;我们的甲方就是上游不同的业务。中台原则上是业务和能力分离&#xff0c;但是不可避免的是分不开&…

数据结构学习之路--全面破解顺序表的奥秘(附C源码)

好久不见啊~大家&#xff0c;今天为大家带来的主题是&#xff1a;顺序表的实现。 目录 前言 一、线性表的定义 二、线性表的顺序结构 1 顺序表的定义 2 顺序表的基本操作 2.1 初始化函数 2.2 顺序表的销毁 2.3 顺序表的扩容 2.4 顺序表的尾插 2.5 顺序表的尾删 …

【学习】软件测试需求分析要从哪些方面入手

软件测试需求分析是软件测试过程中非常重要的一个环节&#xff0c;它是为了明确软件测试的目标、范围、资源和时间等要素&#xff0c;以确保软件测试的有效性和全面性。本文将从以下几个方面对软件测试需求分析进行详细的阐述&#xff1a; 一、软件测试目标 软件测试目标是指…

LeetCode_145(二叉树的后序遍历)

1.递归 public List<Integer> postorderTraversal(TreeNode root) {List<Integer> res new ArrayList<>();accessTree(root,res);return res;}public void accessTree(TreeNode root, List<Integer> res){if(root null){return;}accessTree(root.le…

219 基于matlab的汽车悬架(钢板弹簧,减震器)设计程序GUI

基于matlab的汽车悬架&#xff08;钢板弹簧&#xff0c;减震器&#xff09;设计程序&#xff27;&#xff35;&#xff29;。根据需求输入设计参数&#xff0c;包括前桥负荷、簧下质量、弹簧刚度、阻尼等&#xff0c;输出钢板弹簧、减震器结果。程序已调通&#xff0c;可直接运…

FHE全同态加密简介

1. 何为FHE&#xff1f; FHE (Fully homomorphic encryption)&#xff1a; 是一种隐私技术&#xff0c;支持直接对密文进行计算&#xff0c;而无需对密文先解密再计算。即&#xff0c;任何第三方或云厂商&#xff0c;都可对敏感信息的密文进行处理&#xff0c;而无需访问密文内…

基于web的音乐网站的设计与实现(论文+源码)_kaic

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了音乐网站的开发全过程。通过分析音乐网站管理的不足&#xff0c;创建了一个计算机管理音乐网站的方案。文章介绍了音乐网站的系统分析部分&#xff0c;包括可行性…

最新ChatGPT4.0工具使用教程:GPTs使用,Midjourney绘画,AI换脸,Suno-AI音乐生成大模型一站式系统使用教程

一、前言 ChatGPT3.5、GPT4.0、相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和用户进行创作交流。 然而&#xff0c;GPT-4对普通用户来说都是需要额外付费才可以…

FPGA开源项目分享——基于 DE1-SOC 的 String Art 实现

导语 今天继续康奈尔大学FPGA课程ECE 5760的典型案例分享——基于DE1-SOC的String Art实现。 &#xff08;更多其他案例请参考网站&#xff1a; Final Projects ECE 5760&#xff09; 1. 项目概述 项目网址 ECE 5760 Final Project 项目说明 String Art起源于19世纪的数学…

信息系统项目管理师0044:IT治理方法与标准(3信息系统治理—3.1 IT治理—3.1.4 IT治理方法与标准)

点击查看专栏目录 文章目录 3.1.4 IT治理方法与标准1. ITSS中1T服务治理 3.1.4 IT治理方法与标准 考虑到IT治理对组织战略目标达成的重要性&#xff0c;国内外各类机构持续研究并沉淀IT治理相关的最佳实践方法、定义相关标准&#xff0c;这里面比较典型的是我国信息技术服务标准…

6种xinput1_3.dll丢失的解决办法,并探讨xinput1_3.dll丢失的原因及其属性。

xinput1_3.dll扮演着Visual C运行时库中不可或缺的角色&#xff0c;众多电脑软件都需依赖它以确保正常运行。 当您启动软件时&#xff0c;若遇到xinput1_3.dll无法执行代码的提示&#xff0c;可能会导致软件无法如常启动或运行。本文将向您介绍6种解决方案&#xff0c;并探讨xi…

【Web开发】jquery图片放大镜效果制作变焦镜头图片放大

jquery图片放大镜效果制作变焦镜头图片放大实现 整体步骤流程&#xff1a; 1. 前端html实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"…

vitepress/vite vue3 怎么实现vue模版字符串实时编译

如果是vue模版字符串的话&#xff0c;先解析成模版对象 另一篇文章里有vue模版字符串解析成vue模版对象-CSDN博客 //vue3写法&#xff08;vue2可以用new Vue.extend(vue模版对象)来实现&#xff09;import { createApp, defineComponent } from vue;// 定义一个简单的Vue组件c…

SQLite超详细的编译时选项(十六)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite数据库文件格式&#xff08;十五&#xff09; 下一篇&#xff1a;SQLite 在Android安装与定制方案&#xff08;十七&#xff09; 1. 概述 对于大多数目的&#xff0c;SQLite可以使用默认的 编译选项。但是…

elementui树形组件自定义高亮颜色

1、需求描述&#xff1a;点击按钮切换树形的章节&#xff0c;同时高亮 2、代码实现 1&#xff09;style样式添加 <style> .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {background-color: #81d3f8 !important; //高亮颜色colo…

通过pre标签进行json格式化展示,并实现搜索高亮和通过鼠标进行逐个定位的功能

功能说明 实现一个对json进行格式化的功能添加搜索框&#xff0c;回车进行关键词搜索&#xff0c;并对关键词高亮显示搜索到的多个关键词&#xff0c;回车逐一匹配监听json框&#xff0c;如果发生了编辑&#xff0c;需要在退出时提示&#xff0c;在得到用户确认的情况下再退出…