详解各种获取元素宽高及位置的属性,scroll的属
分类:pc28.am

HTML成分有多少个offset、client、scroll开端的性子,总是令人恍恍惚惚。在书中看见记下来,共享给需求的伴儿。首若是以下多少个属性:

图片 1

offsetWidth / offsetHeight

第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent

目录

offsetWidth

HTMLElement.offsetWidth 是一个只读属性,重返贰个成分的构造宽度。一个第一名的(各浏览器的offsetWidth可能天渊之别)offsetWidth是度量包蕴成分的边框(border卡塔尔(英语:State of Qatar)、水平线上的内边距(padding卡塔尔、竖直方向滚动条(scrollbar卡塔尔(قطر‎(假如存在的话)、以致CSS设置的宽度(width卡塔尔(قطر‎的值。

var offsetWidth = element.offsetWidth;

图片 2

第二组:clientWidth,clientHeight,clientLeft,clientTop

1.关于offset

offsetHeight

HTMLElement.offsetHeight 是二个只读属性,它回到该因素的像素高度,中度富含该因素的垂直内边距和边框,且是一个平头。

常备,成分的offsetHeight是豆蔻梢头种因素CSS中度的衡量轨范,包罗成分的边框、内边距和要素的等级次序滚动条(若是存在且渲染的话),不含有:before或:after等伪类成分的莫斯中国科学技术大学学。

对此文书档案的body对象,它包涵代替成分的CSS中度线性总含量高。浮动元素的向下延长内容惊人是被忽略的。

var offsetHeight = element.offsetHeight;

图片 3

第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop

offsetParent(只读)

offsetTop / offsetLeft

图片 4

介绍那多少个属性早先,先介绍下 offsetParent 属性,这样有利于了然。

1.1 HTML成分的offsetWidth,offsetHeight以CSS像素再次回到它的显示器尺寸,包含元素的边框和内边距,不分包外边距。

offsetTop(只读)

offsetParent

HTMLElement.offsetParent 是二个只读属性,再次回到一个照准近些日子的(closest,指富含层级上的前段时间)包含该因素的定位成分。若无长久的要素,则 offsetParent 为多年来的 table, table cell 或根成分(标准情势下为 html;quirks 方式下为 body)。当元素的 style.display 设置为 "none" 时,offsetParent 再次来到 null。

offsetParent 很有用,因为 offsetTop 和 offsetLeft 都以相对于其内边距边界的。

var offsetParent = element.offsetParent;

1.2 offsetLeft和offsetTop属性重返成分的X和Y坐标。平常,它们重临值正是文书档案坐标。但对于已稳固成分的后裔成分和局地其它因素,这么些属性重返的坐标是对峙于祖先成分的而非文书档案。

offsetLeft(只读)

offsetTop

HTMLElement.offsetTop 为只读属性,它回到当前因素相对于其 offsetParent 成分的顶端的离开。

var offsetTop = element.offsetTop;

1.3 offsetParent属性钦定offsetLeft,offsetTop绝没错父成分。若是offsetParent为null,后双边的再次来到值则为文档坐标。因而平时的话,用offsetLeft和offsetTop来测算成分e的地点供给一个循环:

offsetHeight(只读)

offsetLeft

HTMLElement.offsetLeft 是一个只读属性,再次回到当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。

对块级元一向讲,offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。

然而,对于可被截断到下豆蔻梢头行的行内成分(如 span),offsetTop 和 offsetLeft 描述的是首先个边界框的职位(使用 Element.getClientRects() 来获取其调幅和高度),而 offsetWidth 和 offsetHeight 描述的是边界框的尺寸(使用 Element.getBoundingClientRect 来获取其职责)。因而,使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 来对应 left、top、width 和 height 的三个盒子将不会是文本容器 span 的盒子边界。

var offsetLeft = element.offsetLeft;
//计算元素的文档坐标function getElementPosition{ var x=0,y=0; while{ x  =e.offsetLeft; y  =e.offsetTop; e=e.offsetParent; } return {x:x, y:y} ; } 

offsetWidth(只读)

clientWidth / clientHeight

该措施总结的职分也不总是不错的,推荐使用内置的getBoundingClientRect(卡塔尔(英语:State of Qatar)方法。

2.滚动尺寸scroll

clientWidth

Element.clientWidth 是多个只读属性,重临元素的里边宽度,以像素计。该属性包蕴内边距,但不包含垂直滚动条(假诺有)、边框和内地距。

var clientWidth = element.clientWidth;

图片 5

2.1 clientWidth和clientHeight肖似于offsetWidth和offsetHeight属性,不一样的是它们不含有边框大小,只包涵内容和内边距。同一时间,要是浏览器在内边距和边框之间加多了滚动条,clientWidth和clientHeight的再次回到值也不带有滚动条。注意,对于项目,和这些内联元素,clientWidth和clientHeight总是返回0。

scrollWidth(只读)

clientHeight

Element.clientWidth 是多个只读属性,对于还没概念 CSS 只怕内联布局盒子的因素为0,同一时间它是因素内部的冲天(单位像素卡塔尔(قطر‎,包含内边距,但不包含水平滚动条、边框和内地距。

clientHeight 能够经过 CSS height CSS padding - 水平滚动条高度(固然存在卡塔尔国来计量。

var clientHeight = element.clientHeight;

图片 6

2.2 clientLeft和clientTop重回成分的内边距的外边缘和它的边框的外边缘之间的档期的顺序间距和垂直间距,平日那个值就十分左边和上边的边框宽度。不过假诺元素有滚动条,并且浏览器将这么些滚动条旋转在左边或顶端,他们就还隐含了滚动条的上升的幅度。对于内联成分,它们总是为0。常常clientLeft和clientTop用途超小。

scrollHeight(只读)

clientTop / clientLeft

3.1 scrollWidth和scollHeight是因素的源委区域充足它的内边距再增加此外溢出内容的尺码。当内容凑巧和剧情区域相称而从未溢出时,那几个属性与clientWidth和clientHeight是相等的。但当溢出时,它们就包蕴溢出的内容,再次来到值比clientWidth和clientHeight要大。

scrollLeft(可写)

clientTop

Element.clientTop 是三个只读属性,表示叁个成分最上部边框的增长幅度(以像素表示)。不包蕴最上端外边距或内边距。

var clientTop = element.clientTop;

图片 7

3.2 scrollLeft和scrollTop钦点元素的滚动条的职位。注意,scrollLeft和scrollTop是可写的,通过设置它们来让要素中的内容滚动(HTML成分并不曾看似Window对象的scrollTo。

scrollTop(可写)

clientLeft

Element.clientLeft 是一个只读属性,表示三个要素的左边手框的增加率,以像素表示。要是成分的文书方向是从右向左(RTL, right-to-left),况兼由于内容溢出以致左侧现身了三个垂直滚动条,则该属性包含滚动条的幅度。clientLeft 不富含左外边距和左内边距。

var clientLeft = element.clientLeft;

图片 8

obj.offset[WidthHeightTopLeft] 取控件相对于父控的地点event.offset[XY] 取鼠标相在接触事件的控件中的坐标event.screen[XY] 鼠标绝对于荧屏坐标event.client[XY] 鼠标相对于网页坐标在在obj.scroll[WidthHeightTopLeft] 获取对象滚动的大小obj.client[WidthHeightTopLeft] 获取对象可以预知区域的高低

3.关于client

innerWidth / innerHeight

图片 9

无标题文档<!--div{font-family: "宋体";font-size: 12px;color: #000000;}#div1{position:absolute;background-color:#f0f0f0;width:200px;height:200px;left:20px;top:0px;z-index:1;}#div2{background-color:#cfc0cf;width:200px;height:210px;position:absolute;left:261px;top:347px;z-index:100;}#div3{background-color:#abbfbf;width:200px;height:200px;position:absolute;left:20px;top:247px;z-index:100;}#div4{background-color:#cfcfcf;width:200px;height:200px;position:absolute;left:461px;top:147px;z-index:100;}-->offset 控件相对于父窗体的位置function offset{ids.innerHTML="offsetLeft =" ids.offsetLeft "&lt;BR&gt;";ids.innerHTML ="offsetWidth =" ids.offsetWidth "&lt;BR&gt;";ids.innerHTML ="offsetHeight =" ids.offsetHeight "&lt;BR&gt;";ids.innerHTML ="offsetTop =" ids.offsetTop "&lt;BR&gt;";ids.innerHTML ="event.offset &#40736;&#26631;&#30456;&#23545;&#20110;&#25511;&#20214;&#30340;&#20301;&#32622;&lt;BR&gt;";ids.innerHTML ="offsetX =" event.offsetX "&lt;BR&gt;";ids.innerHTML ="offsetY =" event.offsetY "&lt;BR&gt;";}function screen{ids.innerHTML="scrollWidth =" ids.scrollWidth "&lt;BR&gt;";ids.innerHTML ="scrollHeight =" ids.scrollHeight "&lt;BR&gt;";ids.innerHTML ="scrollTop =" ids.scrollTop "&lt;BR&gt;";ids.innerHTML ="scrollLeft =" ids.scrollLeft "&lt;BR&gt;";}function client{ids.innerHTML="clientWidth =" ids.clientWidth "&lt;BR&gt;";ids.innerHTML ="clientHeight =" ids.clientHeight "&lt;BR&gt;";ids.innerHTML ="clientTop =" ids.clientTop "&lt;BR&gt;";ids.innerHTML ="clientLeft =" ids.clientLeft "&lt;BR&gt;";}function eventc{ids.innerHTML="&#40736;&#26631;&#30456;&#23545;&#20110;&#23631;&#24149;&#22352;&#26631;&lt;BR&gt;event.screenX=" event.screenX "&lt;BR&gt;";ids.innerHTML ="event.screenY =" event.screenY "&lt;BR&gt;";ids.innerHTML ="&#40736;&#26631;&#30456;&#23545;&#20110;&#32593;&#39029;&#22352;&#26631;event.clientX=" event.clientX "&lt;BR&gt;";ids.innerHTML ="event.clientY =" event.clientY "&lt;BR&gt;";}

clientWidth(只读)

innerWidth

window.innerWidth 是三个只读属性,表示浏览器视口(viewport)宽度(单位:像素),假设存在垂直滚动条则囊括它。

var innerWidth = window.innerWidth;

各浏览器都有这几个属性,有个别值或者分歧等。

clentHeight(只读)

innerHeight

window.innerHeight 是一个只读属性,表示浏览器窗口的视口(viewport)高度(以像素为单位),假诺存在水平滚动条则饱含它。

var innerHeight = window.innerHeight;

投机写代码,相比较一下结出,就清楚了。

clientLeft(只读)

outerWidth / outerHeight

图片 10

clientTop(只读)

outerWidth

Window.outerWidth 是一个只读属性,表示一切浏览器窗口的宽度,包罗左侧栏(假如存在)、窗口镶边(window chrome)和调正窗口大小的边框(window resizing borders/handles)。

var outerWidth = window.outerWidth;

4.关于clientRect

outerHeight

Window.outerHeight 是三个只读属性,表示收获整个浏览器窗口的万丈(单位:像素),包蕴左侧栏(假诺存在)、窗口镶边(window chrome)和窗口调正边框(window resizing borders/handles)。

var outerHeight = window.outerHeight;

getBoundingClientRect

scrollTop / scrollLeft

图片 11

5.接收场景

scrollTop

Element.scrollTop 属性能够得到或安装二个因素的内容垂直滚动的像素数。

三个要素的 scrollTop 值是以此成分的顶上部分到它的最顶上部分可以预知内容(的顶端)的离开的心胸。当三个要素的剧情并未有生出垂直方向的滚动条,那么它的 scrollTop 值为0。

scrollTop 能够被设置为别的整数值,同期注意:

  • 借使二个因素不能被滚动(举个例子,它未有溢出,可能这几个元素有一个"non-scrollable"属性), scrollTop将被安装为0。
  • 安装scrollTop的值小于0,scrollTop 被设为0
  • 后生可畏经设置了高于那个容器可滚动的值, scrollTop 会被设为最大值
var  scrollTop = element.scrollTop; // 获取
element.scrollTop = intValue; // 设置

图片 12

1.图形懒加载

scrollLeft

Element.scrollLeft 属性能够读取或设置成分滚动条到成分左边包车型地铁离开。

留意就算那些因素的原委排列方向(direction) 是rtl (right-to-left卡塔尔国,那么滚动条会坐落于最右面(内容在此之前处),何况scrollLeft值为0。那时,当您从右到左拖动滚动条时,scrollLeft会从0变为负数(这几个特点在chrome浏览器中不设有)。

scrollLeft 能够是随便整数,不过:

  • 若是元素不能滚动(比如:成分未有溢出),那么scrollLeft 的值是0。
  • 借使给scrollLeft 设置的值小于0,那么scrollLeft 的值将变为0。
  • 假设给scrollLeft 设置的值大于成分内容最大开间,那么scrollLeft 的值将被设为成分最大幅度面。
var  scrollLeft = element.scrollLeft; // 获取
element.scrollLeft = intValue; // 设置

scrollWidth / scrollHeight

图片 13

1.关于offset

scrollWidth

Element.scrollWidth 是一个只读属性,以px为单位重临成分的内容区域上涨的幅度或因素的我的大幅中越来越大的丰盛值。若成分的增长幅度超越其内容的区域(例如,元素存在滚动条时), scrollWidth 的值要压倒 clientWidth。

var scrollWidth = element.scrollWidth;

 图片 14

scrollHeight

Element.scrollHeight 是三个只读属性,它是叁个要素内容中度的心路,富含由于溢出诱致的视图中不可以知道内容。未有垂直滚动条的事态下,scrollHeight值与成分视图填充全部剧情所急需的一丁点儿值clientHeight相像。蕴涵成分的padding,但不包涵元素的border和margin。scrollHeight也席卷 ::before 和 ::after那样的伪成分。

var scrollHeight = element.scrollHeight;

图片 15

offsetParent(只读)

scrollX / scrollY

HTMLElement.offsetParent 是三个只读属性,重临一个指向性近期的(closest,指饱含层级上的近年)蕴涵该因素的定势成分。若无永久的要素,则 offsetParent 为近日的 table, table cell 或根成分(规范情势下为 html;quirks 格局下为 body)。当成分的 style.display 设置为 "none" 时,offsetParent 再次来到 null。offsetParent 很有用,因为 offsetTop 和 offsetLeft 都是对立于其内边距边界的。

scrollX

回去文书档案/页面水平方向滚动的像素值,此中 pageXOffset 属性是 scrollY 属性的别称

var scrollX = window.scrollX;

全体的拿到文书档案/页面在等级次序方向已滚动的像素值的包容性代码:

var x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;

 

scrollY

归来文书档案/页面在笔直方向已滚动的像素值,个中 pageYOffset 属性是 scrollY 属性的小名

var scrollX = window.scrollY;

完整的收获文书档案/页面在笔直方向已滚动的像素值的包容性代码:

var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

兼容性:

在 Webkit 中,假若成分为蒙蔽的(该因素或其祖先成分的 style.display 为 "none"),或许该因素的 style.position 被设为 "fixed",则该属性返回null。

在 IE 9 中,假若该因素的 style.position 被安装为 "fixed",则该属性再次回到null。(display:none 无影响。)

 

块级成分&行内成分

对块级成分来讲,offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了成分相对于 offsetParent 的边界框。

 

而是,对于可被截断到下风流浪漫行的行内成分(如 span),offsetTop 和 offsetLeft 描述的是首先个边界框的职位(使用 Element.getClientRects(卡塔尔(قطر‎来获得其调幅和可观),而 offsetWidth 和 offsetHeight 描述的是边界框的维度(使用 Element.getBoundingClientRect 来获取其地点)。因而,使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 来对应 left、top、width 和 height 的叁个盒子将不会是文本容器 span 的盒子边界。

 

offsetTop(只读)

HTMLElement.offsetTop 为只读属性,它回到当前成分相对于其 offsetParent 成分的最上部的相距。

 

offsetLeft(只读)

HTMLElement.offsetLeft 是一个只读属性,重回当前成分左上角相对于 HTMLElement.offsetParent 节点的侧边界偏移的像素值。

 

offsetHeight(只读)

HTMLElement.offsetHeight 是三个只读属性,它回到该因素的像素中度,中度包罗该因素的垂直内边距和边框,且是二个整数。

日常,成分的offsetHeight是生龙活虎种成分CSS高度的评定法规,包含成分的边框、内边距和因素的品位滚动条(借使存在且渲染的话),不带有:before或:after等伪类成分的中度。

对于文书档案的body对象,它概括代替成分的CSS高度线性总含量高。浮动成分的向下延长内容中度是被忽略的。

 

 

offsetWidth(只读)

是?

HTMLElement.offsetWidth 是一个只读属性,再次回到四个因素的构造宽度。叁个标准的(译者注:各浏览器的offsetWidth大概天差地别)offsetWidth是度量满含成分的边框(border卡塔尔(قطر‎、水平线上的内边距(padding卡塔尔国、竖直方向滚动条(scrollbar卡塔尔(假使存在的话)、以致CSS设置的肥瘦(width卡塔尔的值。

 

 

2.滚动尺寸scroll

图片 16

能够安装那些值来调控滚动

 

scrollWidth(只读)

要素的scrollWidth只读属性以px为单位再次回到成分的内容区域上升的幅度或因素的本人的大幅中越来越大的不行值。若成分的增长幅度大于其剧情的区域(举例,元素存在滚动条时), scrollWidth的值要大于clientWidth

 

scrollHeight(只读)

Element.scrollHeight 是精兵简政成分内容中度的只读属性,包涵overflow样式属性诱致的视图中不可以见到内容。未有垂直滚动条的状态下,scrollHeight值与成分视图填充全部剧情所急需的蝇头值clientHeight相符。包含元素的padding,但不包含成分的margin.

 

scrollLeft(可写)

Element.scrollLeft 属性能够读取或安装成分滚动条到成分左边的偏离。

小心借使这一个成分的源委排列方向(direction) 是rtl (right-to-left卡塔尔,那么滚动条会坐落于最右面(内容起头处),并且scrollLeft值为0。当时,当你从右到左拖动滚动条时,scrollLeft会从0变为负数(那天性子在chrome浏览器中荒诞不经)。

 

scrollTop(可写)

其后生可畏Element.scrollTop 属性能够设置或许得到多个因素被卷起的像素间距。一个要素的 scrollTop 是足以去总计出那一个因素最高中度间隔它容器顶端的可知中度。当三个因素的容器未有发出垂直方向的滚动条,那它的 scrollTop 的值默以为0.

 

注意:

得到页面向上滚动的离开,有浏览器兼容性难题,获取格局:

document.documentElement.scrollTop||document.body.scrollTop

 

3.关于client

图片 17

clientWidth(只读)

Element.clientWidth 属性表示成分的内部宽度,以像素计。该属性包含内边距,但不富含垂直滚动条(假使有)、边框和外省距。

 

clentHeight(只读)

回到成分内部的莫斯科大学(单位像素卡塔尔(قطر‎,包涵内边距,但不包含水平滚动条、边框和异乡距。

clientHeight 能够经过 CSS height CSS padding - 水平滚动条高度(就算存在卡塔尔(英语:State of Qatar)来计算.

 

获得页面中度:document.documentElement.clientHeight

 

clientLeft(只读)

代表多个要素的右手框的增进率,以像素表示。假如元素的公文方向是从右向左(RTL, right-to-left),并且由于内容溢出招致左边现身了三个垂直滚动条,则该属性包罗滚动条的宽窄。clientLeft 不满含左外边距和左内边距。clientLeft 是只读的。

 

clientTop(只读)

二个要素顶上部分边框的上升的幅度(以像素表示)。不包含顶上部分外边距或内边距。clientTop 是只读的。

 

4.关于clientRect

getBoundingClientRect

Element.getBoundingClientRect(卡塔尔方法再次来到成分的高低及其相对于视口的职位。

再次回到值是叁个 DOMRect 对象,那个指标是由该因素的 getClientRects(卡塔尔(英语:State of Qatar)方法再次回到的大器晚成组矩形的集纳, 即:是与该因素相关的CSS 边框集结 。

图片 18

DOMRect 对象包涵了豆蔻梢头组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的性质都以相持于视口的左上角地方来讲的

图片 19

当总计边界矩形时,会思考视口区域(或其余可滚动成分)内的滚动操作,也便是说,当滚动地方发生了退换,top和left属性值就能够随之立刻产生变化(由此,它们的值是周旋于视口的,实际不是纯属的)。

 

兼容性:

图片 20

何人知的好啊有木有?!

 

视口:浏览器可以知道区域

pc端:视口能够调度

运动端:视口是原则性的

 


5.选取场景

图表懒加载

教程:Nirvana-zsy/图片懒加载德姆o

github源码:Nirvana-zsy/lazyLoad

本文由pc28.am发布于pc28.am,转载请注明出处:详解各种获取元素宽高及位置的属性,scroll的属

上一篇:3二次开拓入门,浏览器检验JS代码 下一篇:没有了
猜你喜欢
热门排行
精彩图文