offsetTop、offsetLeft、offsetWidth、offsetHeight、style中的样式

< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如:
<div id="tool">
      <input type="button" value="提交">
      <input type="button" value="重置">
</div>

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。

“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离,因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离,因为距其左边最近的是“提交”按钮的右边框。


offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

二、offsetTop 只读,而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

offsetTop、offsetLeft、offsetWidth、offsetHeight、style中的样式 - netcorner - netcorner的博客
scrollHeight: 获取对象的滚动高度。  
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标  
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量  

以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
本文转自 netcorner 博客园博客,原文链接:http://www.cnblogs.com/netcorner/archive/2007/10/28/2912268.html  ,如需转载请自行联系原作者

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

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

相关文章

Mock2 moco框架的http协议get方法Mock的实现

首先在Chapter7文件夹下再新建一个startGet.json startget.json代码如下&#xff0c;因为是get请求&#xff0c;所以要写method关键字&#xff0c;有两个&#xff0c;一个是有参数&#xff0c;一个是无参数的请求。 [{"description":"模拟一个没有参数的get请求…

imessage_如何在所有Apple设备上同步您的iMessage

imessageMessages in iCloud lets you sync your iMessages across all of your Apple devices using your iCloud account. Here’s how to set it up. 通过iCloud中的消息&#xff0c;您可以使用iCloud帐户在所有Apple设备上同步iMessage。 设置方法如下。 Apple announced t…

“.Net 社区大会”(dotnetConf) 2018 Day 1 主题演讲

Miguel de Icaza、Scott Hunter、Mads Torgersen三位大咖给大家带来了 .NET Core ,C# 以及 Xamarin的精彩内容&#xff1a;6月份已经发布了.NET Core 2.1, 大会上Scott Hunter 一开始花了大量的篇幅回顾.NET Core 2.1的发布&#xff0c;社区的参与度已经非常高&#xff0c;.NET…

长时间曝光计算_如何拍摄好长时间曝光的照片

长时间曝光计算In long exposure photography, you take a picture with a slow shutter speed—generally somewhere between five and sixty seconds—so that any movement in the scene gets blurred. It’s a way to show the passage of time in a single image. Let’s …

深度学习入门3

CNN 第一周&#xff1a; title: edge detection example 卷积核在边缘检测中的应用&#xff0c;可解释&#xff0c;卷积核的设计可以找到像素列突变的位置 把人为选择的卷积核参数&#xff0c;改为学习参数&#xff0c;可以学到更多的特征 title: padding n * n图片&#xff0c…

图像大小调整_如何在Windows中调整图像和照片的大小

图像大小调整Most image viewing programs have a built-in feature to help you change the size of images. Here are our favorite image resizing tools for Windows. We’ve picked out a built-in option, a couple of third party apps, and even a browser-based tool.…

Spring Data JPA例子[基于Spring Boot、Mysql]

阅读目录 关于Spring Data关于Spring Data子项目关于Spring Data Jpa例子&#xff0c;Spring Boot Spring Data Jpa运行、测试程序程序源码参考资料关于Spring Data Spring社区的一个顶级工程&#xff0c;主要用于简化数据&#xff08;关系型&非关系型&#xff09;访问&am…

The way of Webpack learning (IV.) -- Packaging CSS(打包css)

一&#xff1a;目录结构 二&#xff1a;webpack.config.js的配置 const path require(path);module.exports {mode:development,entry:{app:./src/app.js},output:{path:path.resolve(__dirname,dist),publicPath:./dist/,//设置引入路径在相对路径filename:[name].bundle.js…

文本文档TXT每行开头结尾加内容批处理代码

文本文档TXT每行开头结尾加内容批处理代码 读A.TXT ,每行开头加&#xff1a;HTMLBodytxt HTMLBodytxt chr(10) aaaaaaaa结尾加&#xff1a;bbbbbbbb处理后的文档写入到B.TXT For /f "delims" %%i in (a.txt) do echo HTMLBodytxt HTMLBodytxt chr(10) aaaaaaaa%%…

windows运行对话框_如何在Windows运行对话框中添加文本快捷方式?

windows运行对话框Windows comes prepackaged with a ton of handy run-dialog shortcuts to help you launch apps and tools right from the run box; is it possible to add in your own custom shortcuts? Windows预包装了许多方便的运行对话框快捷方式&#xff0c;可帮助…

Zabbix 3.0 安装

Zabbix 3.0 For CentOS6安装 1 概述2 安装MySQL3 安装WEB4 安装Zabbix-Server5配置WEB1概述 对于3.0&#xff0c;官方只提供CentOS7的RPM包&#xff0c;Ubuntu的DEB包&#xff0c;对于CentOS6&#xff0c;默认不提供RPM包&#xff0c;为了照顾到使用CentOS6的兄弟们&#xff0c…

[Hadoop in China 2011] 中兴:NoSQL应用现状及电信业务实践

http://tech.it168.com/a2011/1203/1283/000001283154.shtml 在今天下午进行的NoSQL系统及应用分论坛中&#xff0c;中兴云计算平台研发总工、中兴通讯技术专家委员会专家高洪发表主题演讲“NoSQL技术的电信业务实践”&#xff0c;介绍了NoSQL的发展现状及其在电信业务中的应用…

qmediaplayer获取流类型_Java 流API

流相关的接口和类在java.util.stream包中。AutoCloseable接口来自java.lang包。所有流接口从继承自AutoCloseable接口的BaseStream接口继承。AutoCloseable|--BaseStream|--IntStream|--LongStream|--DoubleStream|--Stream如果流使用集合作为其数据源&#xff0c;并且集合不需…

田刚:庞加莱猜想与几何

&#xff08;作者 田刚&#xff09; 时间&#xff1a;2015年11月1日 地点&#xff1a;北京大学北京国际数学研究中心 主题&#xff1a;未来论坛“理解未来”讲座北大专场&#xff1a;庞加莱猜想与几何 田刚&#xff1a; 非常高兴能够有这个机会来参加未来论坛讲演。我今天要讲的…

进化:从孤胆极客到高效团队_极客学校:学习Windows 7 –远程管理

进化:从孤胆极客到高效团队In this installation of Geek School, we look at how we can administer our machines remotely using Remote Assistance, Remote Desktop, Windows Remote Management also known as WinRM, and PowerShell. 在此Geek School安装中&#xff0c;我…

打印墨水调钢笔墨水_如何节省墨水并改善网站打印质量

打印墨水调钢笔墨水Printing out web pages you want a hard copy of can be a little hit and miss. Unlike other documents, it is not easy to tell exactly how many pieces of paper will be needed, and whether or not there will be any awkward clipping. Add to thi…

highcharts 怎么去掉鼠标悬停效果_练瑜伽减肥没效果什么原因?

没有心的参与&#xff0c;瑜伽就不是瑜伽曾经有很多人问&#xff1a;自己想用瑜伽来减肥&#xff0c;但练习瑜伽这么久&#xff0c;为什么还是减不下来&#xff1f;一点效果都没有。瑜伽是什么&#xff1f;瑜伽只是一种单纯的运动吗&#xff1f;只让身体参与进去就可以了吗&…

Java基础学习总结(23)——GUI编程

2019独角兽企业重金招聘Python工程师标准>>> 一、AWT介绍 所有的可以显示出来的图形元素都称为Component&#xff0c;Component代表了所有的可见的图形元素&#xff0c;Component里面有一种比较特殊的图形元素叫Container&#xff0c;Container(容器)在图形界面里面…

在Windows 7或Vista(或Windows 8.x,Sorta)上禁用Aero

The Windows Aero Glass interface for Windows 7 or Vista requires a decent video card, you won’t be able to use it on an old clunker computer. For those worried about performance, sometimes squeezing every last drop requires disabling Aero. Windows 7或Vist…

macos mojave_使Ubuntu看起来像macOS Mojave的黑暗模式

macos mojaveIf you’re a Linux user who likes the look of the dark mode coming in macOS Mojave, you’re in luck: there’s a GTK theme just for you. 如果您是Linux用户&#xff0c;并且喜欢macOS Mojave中的黑暗模式外观&#xff0c;那么您很幸运&#xff1a;这里有一…