新浦京81707con > 首页 > clientLeft之间的区别

原标题:clientLeft之间的区别

浏览次数:107 时间:2019-11-20

本小说来给诸位同那介绍一下有关js中offsetLeft,offsetTop,offsetParent详细解释,假诺你对此教程风乐趣不防进入参谋一下。

图片 1

为前端开采工程师,你规定真的精通offsetLeft,offsetTop以致offsetParent吗,前几日小编在那处给大家详细说说这八个js的风味,当然前七个其特点是平等的,在此边自个儿就只拿offsetLeft的注解。

假设 obj 为某个 HTML 控件

1.offsetLeft/offsetTop

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

在页面任一成分的offsetLeft总是找到离其近些日子的已经固化的因素定位,如果未有,就依赖根节点body定位,然后拿走其left值比方

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

 代码如下

obj.offsetWidth 指 obj 控件本身的断然宽度,不包含因 overflow 而未出示的一些,也等于其实际据有的上升的幅度,整型,单位像素。

复制代码

obj.offsetHeight 指 obj 控件自个儿的相对化惊人,不包罗因 overflow 而未出示的一些,也等于其实际据有的冲天,整型,单位像素。

<div id=”div2″>
<div id=”div3″>
<div id=”div4″></div>
</div>
</div>

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

css:
#div2{width:400px;height:400px;background:#0f0;margin-left:10px}
#div3{width:300px;height:300px;background:#00f;margin-left:10px}
#div4{width:200px;height:200px;background:#000;margin-left:10px;}

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的援用。offsetTop 与 offsetParent 很复杂,分歧浏览器有不相同解释,浮动一下演讲又区别了,所以大家日常只要驾驭通过双方能够收获控件在浏览器中的相对地方就能够。

div4的offsetLeft根据body定位:10 10 10=30

上述属性在 FireFox 中也立见成效。

若果大家将css做如下校正

别的:我们那边所说的是指 HTML 控件的属性值,实际不是document.body,document.body 的值在不一致浏览器中有不一样解释(实际上海高校部分条件是出于对 document.body 解释分裂产生的,并不是由于对 offset 解释不一致产生的卡塔尔国

 代码如下

我们领略 offsetTop 能够获取 HTML 成分间隔上方或外层成分的岗位,style.top 也是能够的,二者的界别是:

复制代码

生机勃勃、offsetTop 重临的是数字,而 style.top 重临的是字符串,除了数字外还满含单位:px。

css:
#div2{width:400px;height:400px;background:#0f0;position:relative;margin-left:10px}
#div3{width:300px;height:300px;background:#00f;margin-left:10px}
#div4{width:200px;height:200px;background:#000;margin-left:10px;}

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

div4的offsetLeft根据div2定位:10 10=20

三、若无给 HTML 成分内定过 top 样式,则 style.top 再次来到的是空字符串。

offsetTop同理

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是千篇生龙活虎律道理。

2.offsetParent

clientHeight 世家对 clientHeight 都不曾什么样争论,都感觉是内容可视区域的可观,也便是说页面浏览器中能够观望内容的这些区域的万丈,日常是终极四个工具条以下到状态栏以上的那个区域,与页面内容非亲非故。

实在offsetParent,重回一个元素离其多年来的已经固定的因素,若无就赶回body,其定义和offsetLeft差不离

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

3.实例:封装八个函数获得任一成分在页面包车型客车职分

scrollHeight IE、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 的分解与地点相仿,只是把高度换来宽度就能够。

var GetPosition= function (obj)
{
var left = 0;
var top = 0;
while(obj.offsetParent)//假如obj的有新近的父级定位成分就一而再再而三
{
left = obj.offsetLeft;//累加
top = obj.offsetTop;
obj=obj.offsetParent;//更新obj,继续判定新的obj是不是还或然有父级定位,然后继续充足
}
return {“left”:left,”top”:top}//返回json格式
}

说明 上述基于 DTD HTML 4.01 Transitional,若是是 DTD XHTML 1.0 Transitional 则意义又会区别,在 XHTML 中那多个值都是同三个值,都意味内容的实际中度。新本子的浏览器超级多帮助依据页面钦定的 DOCTYPE 来启用差别的解释器

 IE6,IE7 对offsetParent解释有个小BUG,当祖先成分都不是牢固成分且本身是平素成分的时候回来document.documentElement,别的景况终再次来到document.body!!

scrollTop 是“卷”起来的惊人值,示例:

 代码如下

复制代码 代码如下:

复制代码

<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
<div style="width:50px;height:300px;background-color:#0000FF;" id="t">若是为 p 设置了 scrollTop,这么些内容恐怕不会完全体现。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>

<body>
    <div id="b" style="position:relative">
        <div id="a"></div>
    </div>

出于为外层成分 p 设置了 scrollTop,所以内层成分会向上卷,那卷起来的部分正是 scrollTop。

 

scrollLeft 也是临近道理。

    <div id="d">
        <div id="c"></div>
    </div>

小编们早就领会 offsetHeight 是小编因素的肥瘦,而 scrollHeight 是内部因素的相对化宽度,包罗在那之中因素的藏身的有个别。上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。

本文由新浦京81707con发布于首页,转载请注明出处:clientLeft之间的区别

关键词: 新浦京81707con

上一篇:正则表达式学习经验分析第1,学点Java正则表达式

下一篇:没有了