对js offset位置 宽高的理解

clientTop,clientLeft:元素边框宽度。  clientWidth:元素width+元素padding。 offsetWidth:元素width+元素padding+元素边框宽

offsetWidth,offsetHeight: 元素的可见宽度和高度。只跟该元素的本身有关

offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

offsetLeft,offsetRight：与offsetParent有关

offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。

offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。

offsetParent为body时情况比较特殊:

在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(当前元素的margin-left)。

在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(当前元素的margin-left)。

offsetParent:

1、如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

时间： 2024-12-15 01:59:05

对js offset位置 宽高的理解的相关文章

js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等（带图片说明）

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;(点击查看大图) 网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);(点击查看大图)有没有发现,offsetWidth和clientWidth的区别,offsetWidt是连滚动条一起包含在内的. 网页正文全文宽: documen

JS和jQuery宽高详解（上篇）

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.5px "Trebuchet MS" } li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.5px "Trebuchet MS" } span.s1 { } span.s2 { font: 12.0px Helvetica } ol.o

js实现未知宽高的元素在指定元素中垂直水平居中

js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.soft

各种情况上JS获取元素宽高

各种情况下JS获取元素宽高 为了叙述简单,这里仅拿width示例. 情景一,元素style属性设置了width/height <div style="width:996px">test<div><script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width);</script>默认分类 如上,使用el.style.width即可. 如果没有

js/jq宽高的理解与运用

document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftdocument.body.clientTop 2. 与offset相关的宽高 3. 与scroll相关的宽高 网页滚动到顶部或底部: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=

js各种宽高的理解

1.window.innerHeight.window.outerHeight  窗口的外层的高度/内层高度 2.window.innerWidth/window.outerWidth  窗口的外层的宽度/内层宽度 3.window.screen包含有关用户屏幕的信息 window.screen.width window.screen.height window.screen.availWidth(可视化的宽度) window.screen.availHeight(可视化的高度) window.

JS和jQuery宽高详解（下篇）

jQuery相关的宽高 和JS相比,jQuery就像亲妈一样,JS就是后妈,哈哈哈哈哈------总之,jQuery对很多有关兼容的问题进行封装,只有极少一部分属性需要考虑兼容,用起来非常滴方便-- 与jQuery相关的宽高: .width()与.height(): .innerWidth()与 .innerHeight(); .outerWidth() 与.outerHeight(); 上边3对是jQuery里宽高相关的属性:下边3对是与宽高相关的属性. .scrollTop() 与.scro

原生JS获取元素宽高实践详解

开篇的话 任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排查出是获取元素高度那里出了问题,这个问题记忆在书上或视频中看到过,许久没用,用的时候就想当然了.遂决定深入剖析用法,增加记忆,记录发表出来,也能给各位前端同行.求学者增加印象. 出错之处 秉承结构.样式.行为分离的宗旨,每次不管大小案例都是分开写html.css.js.这也算抛砖引出了我犯错的玉. 原css

关于html中的设置body宽高的理解

有时候看到别人的代码中经常出现在body中设置的宽高,不是很理解,于是自己测试了下,瞬间懂了,废话不多说,直接上代码: 首先创建好一个基本的html文件,设body的背景色为red: 相信大家都知道效果了,没错! 接着,我们向body里面加个div,给背景设为白色,然后居中,并且不给div宽度.代码如下: 效果图上: 很显然,body的实际宽度是和子类div中的宽度一样的,那为什么body的背景是覆盖整个页面呢?这是别人的猜想: 于是乎,我们上代码: 效果图上: 果然 因此我们得出一些结论:默认