js offsetHeight offsetWidth 解说

最新推荐文章于 2024-10-19 09:50:12 发布
转载 最新推荐文章于 2024-10-19 09:50:12 发布 · 543 阅读 · 0
文章标签：

#文档 #firefox #ie

本文详细介绍了网页中各种元素的尺寸与位置控制方法，包括scrollHeight、scrollTop等用于滚动条控制的属性，以及offsetHeight、offsetLeft等用于确定元素相对于版面或父元素位置的属性。还对比了IE与Firefox浏览器间实现的差异。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离2009-10-24

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

 

配图： http://photo.blog.sina.com.cn/blogpic/4dbe98f10100bsyk/4dbe98f1g5fc6a1ea4833

 

js运动-offsetWidth和offsetHeight引发的血案
每天进步一点点
05-16 8920
之前说的js运动不管是单物体运动，多物体运动，还是缓冲运动。在获取元素自身宽，高的时候用的都是offsetWidth，offsetHeight，但是这会引发一些麻烦！！因为在js中offsetWidth，offsetHeight获取的不仅仅是元素样式中定义的width，height还包括给元素设置的border和padding的值 看看下面的测试例子： #div1{
javascript中offsetwidth和offsetHeight
最新发布
大今野
12-05 490
这两个属性返回元素的左上角相对于定位父元素左上角的距离。属性来获取元素的布局宽度和高度。这两个属性包括了元素的。要获取元素相对于其定位父元素的位置，可以使用。在JavaScript中，可以使用。
前端攻城狮学习笔记九：让你彻底弄清offset
weixin_30521649的博客
09-03 1057
　　很多初学者对于JavaScript中的offset、scroll、client一直弄不明白，虽然网上到处都可以看一张图（图1），但这张图太多太杂，并且由于浏览器差异性，图示也不完全正确。 图一 　　不知道大家看到这张图的第一感觉如何，反正我的感觉就是“这次第，怎一个乱字了得”。 　　既然我认为上图太多太乱，那么我就把offset、scroll、client分开说，希望能让大家彻底弄清...
js之offsetHeight
xclsky的博客
12-28 5827
1 offsetHeight是该控件本身的高度。不管该控件有没有设置width和height，offsetHeight是从网页（xxx.jsp）上看到的该控件本身的高度。 如：function btn_btn3_click(){   var obj=document.getElementById("area1");   alert(obj.offsetHeight+"--"+obj.offs
js的offsetHeight offsetWidth
IT人生
07-08 3494
<br />scrollHeight: 获取对象的滚动高度。<br />scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离<br />scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离<br />scrollWidth:获取对象的滚动宽度<br />offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度<br />offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页
10-30
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性 在Javascript拖拽系列文章中，offsetLeft、offsetTop、offsetWidth、offsetHeight四个属性都是非常重要的，它们都是关于位置定位...
offsetHeight在OnLoad中获取为0的现象
09-05
`offsetHeight` 是一个非常重要的 JavaScript 属性，它用于获取一个元素的总高度，包括内边距、边框，但不包括外边距。然而，在某些特定情况下，尤其是在页面加载（OnLoad）事件中尝试获取 `offsetHeight` 时，可能...
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
10-15
在JavaScript中，DOM元素的尺寸和位置是网页布局的关键因素，`offsetWidth`、`clientWidth`、`innerWidth`以及一系列相关属性方法用于获取和处理这些信息。这些属性可以帮助开发者精确地控制页面元素的显示效果，...
js中offsetHeight,clientHeight等属性
qq_35500925的博客
03-20 206
/** * 元素的属性： * offsetWidth: 该元素的width + 左右padding值 + 左右border-width * offsetHeight: 该元素的height + 上下padding值 + 上下border-width * clientWidth: 该元素的width + 左右padding值 * cli...
JS 中 offsetWidth、offsetHeight、offsetLeft、offsetTop 详解
我是张跑跑
12-06 1405
浅析JS中offsetLfet,offsetTop1.W3C的解释1.1 element.offsetLeft：返回元素的水平偏移位置。1.2 element.offsetTop：返回元素的垂直偏移位置。2.个人解释官方的解释只是缺掉了一个点，就是这个偏移位置具体是相对什么的呢？ 1.W3C的解释 1.1 element.offsetLeft：返回元素的水平偏移位置。 1.2 element.of...
js中offsetHeight，offsetWidth，offsetTop,offsetLeft属性的使用
m0_56132701的博客
01-06 2169
element.offsetHeight属性返回元素的垂直高度，element.offsetWidth属性返回元素的水平宽度。element.offsetParent属性与定位有着很大的关系，它的定义是：与当前元素最近的经过定位的父级元素。如果存在水平滚动条，offsetHeight包括水平滚动条的高度。offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离。offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离。
js中clientHeight、offsetHeight、scrollHeight、scrollTop详解
PlayYoung的专栏
08-03 1255
clientHeight 大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。 offsetHeight IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 NS、FF 认为 offsetH
js获取元素高度：clientHeight、offsetHeight
qq_43548684的博客
12-20 1256
有时候动态页面、动态样式，一般的css样式没办法满足动态的需求时，可能就需要获取到元素的高/宽度，进行一定运算，进行样式的兼容等~
JS | JS之元素偏移量 offset 系列属性详解
青春木鱼的博客
10-19 2195
偏移量(offset dimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。当然，还有一个偏移参照——定位父级offsetParent。
JS中height、clientHeight、scrollHeight、offsetHeight区别
BelleDiao的博客
07-27 2094
我们来实现test中的onclick事件 function justAtest(){ var test=document.getElementById("test"); var test2=document.getElementById("test2") var test3=document.getElementById("test3") var test4=document.getElementById("test4...
js offsetHeight
08-20
offsetHeight是一个JavaScript中的属性，用于获取一个元素的高度，包括元素的内容、内边距和边框的高度。根据引用的内容，offsetHeight的计算公式为(border-width)*2 + (padding-top) + (height) + (padding-bottom)。这个属性可以用于动态计算元素的尺寸或者进行相关布局的计算。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [前端攻城狮学习笔记九：让你彻底弄清offset](https://blog.youkuaiyun.com/weixin_30521649/article/details/99330487)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [undefined](undefined)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值