offsetTop、 offsetLeft、offsetWidth、offsetHeight的用法

简介: 假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。 obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。

obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位像素。

我们对前面提到的 offsetParent 作个说明。

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 与 offsetParent 很复杂,不同浏览器有不同解释,浮动一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。

以上属性在 FireFox 中也有效。

另外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,并不是由于对 offset 解释不同造成的),点击这里查看不同点。

这几个参数来制作图片的滚动,文字的滚动

网页可见区域宽: document.body.clientWidth; 
网页可见区域高: document.body.clientHeight; 

 

网页可见区域宽: document.body.offsetWidth   (包括边线的宽); 
网页可见区域高: document.body.offsetHeight  (包括边线的宽); 

网页正文全文宽: document.body.scrollWidth; 
网页正文全文高: document.body.scrollHeight; 

网页被卷去的高: document.body.scrollTop; 
网页被卷去的左: document.body.scrollLeft; 

网页正文部分上: window.screenTop; 
网页正文部分左: window.screenLeft; 

屏幕分辨率的高: window.screen.height; 
屏幕分辨率的宽: window.screen.width; 

屏幕可用工作区高度: window.screen.availHeight; 
屏幕可用工作区宽度:window.screen.availWidth;

目录
相关文章
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
【4月更文挑战第9天】本文对比了Python三大Web框架Django、Flask和Pyramid。Django功能全面,适合快速开发,但学习曲线较陡;Flask轻量灵活,易于入门,但默认配置简单,需自行添加功能;Pyramid兼顾灵活性和可扩展性,适合不同规模项目,但社区及资源相对较少。选择框架应考虑项目需求和开发者偏好。
671 0
|
存储 大数据 数据挖掘
云计算与大数据的关系
云计算与大数据的关系
1527 0
|
运维 监控 持续交付
云计算环境下的运维自动化实践
本文探讨了在云计算环境下实施运维自动化的必要性、挑战及解决方案,重点介绍了如何利用现代技术工具实现高效的云资源管理和监控。通过具体案例分析,展示了自动化运维在提升系统稳定性、降低人力成本方面的优势。
|
机器学习/深度学习 存储 人工智能
AI歌姬,C位出道,基于PaddleHub/Diffsinger实现音频歌声合成操作(Python3.10)
懂乐理的音乐专业人士可以通过写乐谱并通过乐器演奏来展示他们的音乐创意和构思,但不识谱的素人如果也想跨界玩儿音乐,那么门槛儿就有点高了。但随着人工智能技术的快速迭代,现在任何一个人都可以成为“创作型歌手”,即自主创作并且让AI进行演唱,极大地降低了音乐制作的门槛。 本次我们基于PaddleHub和Diffsinger实现音频歌声合成操作,魔改歌曲《学猫叫》。
AI歌姬,C位出道,基于PaddleHub/Diffsinger实现音频歌声合成操作(Python3.10)
|
弹性计算 运维 Cloud Native
阿里云罗晶分享 | X86+ARM,容器服务 ACK 多架构应用部署最佳实践
2023年8月31日,系列课程第五节《X86+ARM,容器服务ACK多架构应用部署最佳实践》正式上线,由阿里云云原生应用平台产品专家罗晶主讲,内容涵盖:容器服务ACK简介;ACK支持倚天ARM实例;ACK多架构应用部署最佳实践。
|
机器学习/深度学习 Java API
阿里云文档智能解析——大模型版能力最佳实践与体验评测
阿里云文档智能解析(大模型版)在处理非结构化数据方面表现优异,尤其是在性能和可扩展性上具有明显优势。虽然存在一些待完善之处,但其强大的基础能力和广泛的适用场景使其成为企业数字转型过程中的有力助手。随着技术的不断进步和完善,相信它会在更多领域展现出更大的价值。
885 6
阿里云文档智能解析——大模型版能力最佳实践与体验评测
|
移动开发 开发框架 前端开发
移动端混合开发技术探析:React Native、Weex、Flutter的比较与选择
随着移动应用开发的高速发展,混合开发技术成为了一种备受关注的选择。本文将对移动端混合开发技术中的React Native、Weex和Flutter进行比较与探讨,分析它们在性能、开发体验、生态系统和跨平台支持等方面的差异,以及如何根据项目需求进行选择。
462 1
|
XML 存储 JSON
详细比较JSON和XML这两种数据格式
详细比较JSON和XML这两种数据格式
975 2
|
弹性计算 前端开发 JavaScript
前端新趋势?有了Web Component,还用纠结Vue或React?
Web Component 的概念最早在 2011 年被 Google 提出,并在 2018 年 V1 版本开始被主流浏览器所支持(除了 IE)。
|
Python
python水仙花数实现
python水仙花数实现
297 0