JavaScript---left与offsetLeft

left 属性：获取或设置具有定位属性（position: absolute）的子元素相对于具有定位属性(position:relative)的父对象的左边距【子绝父相原则】，如果具有定位属性（position: absolute）找不到具有定位属性(position:relative)的父对象，则将相对于body定位。

【补充：绝对定位与相对定位说明】

绝对定位（position: absolute）的元素是相对于距离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没开启定位，则相对于浏览器窗口进行定位。

相对定位（position:relative）的元素相对于其自身在文档流中的位置来定位。

结合示例说明如下：

<body><div id="parent"><div id="son">内层盒子</div></div>
</body>

样式如下

  <style>* {padding: 0px;margin: 0px;box-sizing: border-box;}#parent {width: 400px;height: 400px;background: red;margin: 100px 100px;/*overflow: hidden;*/position: relative;/*相对于自身定位，设置left属性后元素的左边距为100-50=50px*/left: -50px;}#son {width: 200px;height: 200px;background: orange;position: absolute;left: 50px;}</style>

offsetLeft 属性：获取相对于父对象的左边距。

如果父div的position定义为relative,子div的position定义为absolute(子绝父相) ，那么子div的style.left的值是相对于父div的值

left 属性、offsetLeft 属性区别在于：
1. style.left 返回的是字符串，如10px，offsetLeft返回的是数值10。
2. style.left可读可写，offsetLeft只读，因此如果想要改变div的位置，只能通过修改元素的style.left实现。
3. style.left的值需要在html标签中进行定义【<div id="son" style="left:100px"> 内层盒子</div>】，才可以通过【son.style.left】获取到值。如果定义在css样式里，通过【son.style.left】获取到值为空。

JavaScript---left与offsetLeft相关推荐

详解 javascript中offsetleft属性的用法（转）
详解 javascript中offsetleft属性的用法转载 2015-11-11 投稿:mrr 我要评论本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
[转]javascript中style.left和offsetLeft的使用
如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值, 这同offsetLeft是相同的, ...
html更改offset,javascript – HTML offsetLeft延迟更改
我的屏幕上有四个画布,上面有两个,下面有两个. 每个人都有一个按钮,可以最大化画布,隐藏其他画布. 此按钮位于每个画布上方,绝对位置基于画布的offsetTop和offsetLeft. 但是,当我最大 ...
【JavaScript】全面解析offsetLeft、offsetTop
前言:偏移量,很多动画效果的实现都是通过去改变偏移量的改变来实现的,但是你真的完全了解offsetLeft,offsetTop吗? 一.第一个小例子 <body> <style> ...
html中offsetleft属性,JavaScript offsetLeft属性值简介说明
摘要: 下文讲述dom对象之offsetLeft属性值的功能简介说明,如下所示: DOM之offsetLeft属性值说明 DOM之offsetLeft属性值功能说明: offsetLeft属性值用于返 ...
html中offsetleft属性,详解 javascript中offsetleft属性的用法
此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的. (1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离. (2).如果父辈元素中没有定位 ...
针对JavaScript的常用事件、对象捕获和使用技巧
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event ...
Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理...
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
Javascript获取页面、屏幕尺寸大小参数
Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clien ...
AppBaseJs 类库网上常用的javascript函数及其他js类库写的
AppBaseJs类库.一个借鉴了网上常用的函数及其他js类库写的,方便大家的调用. 代码如下: /*----------------------------------- Web Applicat ...

JavaScript---left与offsetLeft

JavaScript---left与offsetLeft相关推荐

最新文章

热门文章