浅析offsetLeft,Left,clientLeft之间的区别_基础知识_脚本之家

2019-11-26 16:07栏目:竞技宝竞猜
TAG:

offset 在装有的浏览器里面成分的offsetTop和offsetLeft多个性格都以很有用的。他们会付出你成分相对于父成分的坐标地点。 这段代码会向上查找offsetParent,然后增添offsetTop和offsetLeft。最后无论offsetParent在哪,他都会交到你成分在荧屏上的着实坐标。 解释 这段代码很简单。先传出要计算的要素,然后设置变量curleft和curtop为0。 复制代码 代码如下: function findPos { var curleft = curtop = 0; 假若浏览器扶助offsetParent: 复制代码 代码如下: if { 每回大家找到二个新的指标的时候,把他的offsetTop和offsetLeft加到curtop和curleft上: 复制代码 代码如下: do { curleft += obj.offsetLeft; curtop += obj.offsetTop; 小本领:再次来到'='的值 上边就是其一能力: 复制代码 代码如下: } while (obj = obj.offsetParent); 这几个不是表明式错误。作者不想用'=='来比较obj和obj.offsetParent(那也远非用,因为二个要素分明和他的父成分不等于卡塔尔。 所以笔者用'='来把obj.offsetParent的值传递给obj。在此边自个儿对这一个手艺有详细的表达。 轻便的回来 那一个循环会当成分未有了offsetParent的时候截止。当offsetParent存在的时候,就还是会把offsetLeft加到curleft上,把offsetTop加到curtop上。 当循环手艺的时候,大家就把坐标重返给调用那些函数的次序。 复制代码 代码如下: return [curleft,curtop];} 翻译地址: 转发请保留以下信息小编:北玉

假设 obj 为某个 HTML 控件

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性钦点的父坐标的计量上侧地方,整型,单位像素。

obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性钦点的父坐标的乘除侧面地方,整型,单位像素。

obj.offsetWidth 指 obj 控件自己的绝对化宽度,不富含因 overflow 而未展现的有些,也正是其实际据有的小幅度,整型,单位像素。

obj.offsetHeight 指 obj 控件自个儿的绝对化惊人,不包涵因 overflow 而未显示的片段,也正是其实际占用的高度,整型,单位像素。

咱俩对前边提到的 offsetParent 作个表达。

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 与 offsetParent 很复杂,不相同浏览器有例外解释,浮动一下讲明又分化了,所以大家常常若是驾驭通过双方可以博得控件在浏览器中的相对地点就可以。

上述属性在 FireFox 中也使得。

别的:大家那边所说的是指 HTML 控件的属性值,并不是document.body,document.body 的值在不相同浏览器中有例外解释(实际上大多意况是出于对 document.body 解释差异变成的,并非出于对 offset 解释差别变成的卡塔尔

我们掌握 offsetTop 能够博得 HTML 成分间隔上方或外层成分之处,style.top 也是能够的,二者的界别是:

生机勃勃、offsetTop 再次来到的是数字,而 style.top 再次回到的是字符串,除了数字外还含有单位:px。

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

三、如果未有给 HTML 成分钦点过 top 样式,则 style.top 重临的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同大器晚成道理。

clientHeight我们对 clientHeight 都并未有何纠纷,都觉着是内容可视区域的中度,也正是说页面浏览器中得以观望内容的这一个区域的可观,平时是最终多个工具条以下到状态栏以上的这几个区域,与页面内容非亲非故。

offsetHeightIE、Opera 感到 offsetHeight = clientHeight + 滚动条 + 边框。NS、FF 以为 offsetHeight 是网页内容实际中度,可以低于 clientHeight。

scrollHeightIE、Opera 以为 scrollHeight 是网页内容实际中度,能够低于 clientHeight。NS、FF 以为 scrollHeight 是网页内容中度,然则最小值是 clientHeight。

一言以蔽之地说clientHeight 正是通过浏览器看内容的这些区域中度。NS、FF 认为offsetHeight 和 scrollHeight 都是网页内容中度,只可是当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 能够低于 clientHeight。IE、Opera 以为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际中度。

同理clientWidth、offsetWidth 和 scrollWidth 的解释与地方同样,只是把中度换到宽度就能够。

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:浅析offsetLeft,Left,clientLeft之间的区别_基础知识_脚本之家