关于offsetTop、offsetLeft

关于offsetTop、offsetLeft的小心得,如有错误,敬请指出,共勉,谢谢。

1.当有定位父级时

(1)当前元素有定位时,offsetTop、offsetLeft 指当前元素到最近定位父级的偏移量

(2)当前元素没有定位时,在ie6、ie7下,指到body的偏移量,其他浏览器同上

2.当没有定位父级时,offsetTop、offsetLeft 可以理解为到当前元素的offsetParent的偏移量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>offsetTop</title>
    <style>
body{
    margin: 0;
    padding: 0;
}

        #div1{
            margin: auto;
             padding: 20px;
            background: blueviolet;
        }
        #div2{
            padding: 30px;
            background: yellow;
            position: relative;
        }
        #div3{
            padding: 40px;
            background: salmon;
        }
    </style>
    <script>
        window.onload=function () {
            var div=document.getElementsByTagName(‘div‘);
            alert(div[2].offsetTop);//div3没有定位时,ie6 ie7 弹出 50,其他浏览器弹出30
        }
    </script>
</head>
<body id="myBody">
<div id="div1">
        <div id="div2">
            <div id="div3"></div>
    </div>
</div>
</body>
</html>
时间: 2024-08-18 16:25:50

关于offsetTop、offsetLeft的相关文章

关于offsetWidth,offsetHeight,offsetTop,offsetLeft和二维数组的声明

offsetWidth,offsetHeight,offsetTop,offsetLeft 为只读状态,返回的值是int形式 只读形式即不能通过修改其值的大小. 想要修改某元素的这些值的大小(width,height,top,left) 可以使用一下方法 elementId.style.width = '20px'; elementId.style.height = '40px'; elementId.style.left = '20px'; elementId.style.top = '10p

JS获取元素的offsetTop,offsetLeft等属性

obj.clientWidth   //元素的宽度(可视区的宽度)不包含border     只读属性 obj.clientHeight  //元素的高度(可视区的高度度)不包含border  只读属性 obj.offsetLeft   //元素相对于父元素的left  只读属性,也就是margin-left的值,不含单位 obj.offsetTop  //元素相对于父元素的top   只读属性,也就是margin-top的值,不含单位 obj.offsetWidth  //元素的宽度(实际的宽

深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth

深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个属性.当然,还有一个偏移参照——定位父级offsetParent.本文将详细介绍该部分内容 定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级

OffsetTop &amp; OffsetLeft 属性

设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素. obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素. obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素. obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素. 我们对前面提到的"上方或上层"与"左方或上层"控件作个说明. 例如:<div id="t

终于搞懂scrollTop, offsetTop, scrollLeft, offsetLeft......

补充说明 上面的图已经标记的已经很明显了,我再稍微补充几点: offsetTop, offsetLeft:只读属性.要确定的这两个属性的值,首先得确定元素的offsetParent.offsetParent指的是距该元素最近的position不为static的祖先元素,如果没有则指向body元素.确定了offsetParent,offsetLeft指的是元素左侧偏移offsetParent的距离,同理offsetTop指的是上侧偏移的距离. offsetHeight, offsetWidth:只

Web前端之 offsetWidth,clientWidth,scrollWidth,offsetLeft,clientLeft,scrollLeft

一.写作缘由: 我想,这绝对是一次意外,对,如此的意外,让我莫名其妙的写下了这篇博文 写下这个原因是我在做滚动文字(图片)的时候遇见了些困难,而不巧的是,就是本文的问题,因此想下定决心搞懂它,就查阅了很多的资料,然后,你懂得,这篇文章就诞生了. 二.涉及问题和总体概括: 如果你对width,offsetWidth,clientWidth,scrollWidth,offsetLeft,clientLeft,scrollLeft这几个的差别还不是很熟悉,那你最好翻阅资料搞清楚, 当然,你也可以看一下

scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义 及 计算方式 附实例说明

一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight offsetWidth 三.可视距离.宽高 clientTop clientLeft clientHeight clientWidth 四.坐标 event.clientX event.clientY event.pageX event.pageY event.offsetX event.offse

扒一扒offsetleft,srollleft,pagex,clientx,postion().left等精确位置的获取与理解

先上个pc端和手机端的图:   说明:上面的属性,都是in这个div的属性值.我是点击的in这个div的左上角,所以pageX.pageY是40. HTML: <div class="out"> <div class="in"></div> </div> css: .out{ width: 300px; height: 300px; background: skyblue; overflow: hidden; } .i

高性能WEB开发:重排与重绘

DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构--DOM树和渲染树. DOM树表示页面结构,渲染树表示DOM节点如何显示.DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点(隐藏的DOM元素disply值为none 在渲染树中没有对应的节点).渲染树中的节点被称为"帧"或"盒",符合CSS模型的定义,理解页面元素为一个具有填充

浏览器的渲染原理简介

原文转自:http://kb.cnblogs.com/page/178445/ 看到这个标题大家一定会想到这篇神文<How Browsers Work>,这篇文章把浏览器的很多细节讲得很细,而且也被翻译成了中文.为什么我还想写一篇呢?因为两个原因, 1)这篇文章太长了,阅读成本太大,不能一口气读完. 2)花了大力气读了这篇文章后可以了解很多,但似乎对工作没什么帮助. 所以,我准备写下这篇文章来解决上述两个问题.希望你能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西. 浏览