深远精晓成分视图的二个章程,获取成分八个边绝对于窗口或文书档案的地方

By admin in 4858美高梅 on 2019年4月13日

深远精晓成分视图的二个章程,获取成分八个边绝对于窗口或文书档案的地方。Element.getBoundingClientRect()再次来到元素的尺寸及相对于窗口的地方

眼下的话

  前边介绍了offset偏移、client客户区和scroll滚动,那叁局地主要从属性的角度来对成分尺寸音讯进行获取和修改。本文首要介绍成分视图的八个办法,包罗getBoundingClientRect()、getClientRects()和elementFromPoint()

 

4858美高梅 1
offsetTop 能够拿走 HTML 成分距离上方或外层元素的职位,style.top
也是能够的,二者的区分是:

Javascript获得获取荧屏、浏览器窗口 ,浏览器,网页中度、宽度的高低

语法:

getBoundingClientRect()

  判断二个成分的尺寸和职分最简易的法子正是利用getBoundingClientRect()

  Element.getBoundingClientRect()方法重回四个对象,该对象提供当前成分节点的大小、它相对于视口(viewport)的岗位等音讯。然而,各样浏览器重返的目的涵盖的习性分裂

firefox: top left right bottom width height x y(其中,x=left,y=top)
chrome/safari/IE9+:top left right bottom width height
IE8-:  top left right bottom

  难题来了,该方法重临的width和height是客户区宽高client,依然滚动宽高scroll,或许是偏移宽高offset,大概是安装宽高呢

<div id="test" style="width: 100px;height: 100px;padding: 10px;line-height: 200px;border:1px solid black;overflow:scroll">内容</div>    
<script>
//chrome/safari: 220(10+200+10)
//firefox/IE: 210(10+200)
console.log(test.scrollHeight)
//103(100+10+10-17)
console.log(test.clientHeight)
//122(100+10+10+1+1)
console.log(test.offsetHeight)
//122(100+10+10+1+1)
console.log(test.getBoundingClientRect().height)
</script>

  由代码结果看到,该办法再次回到的宽高是偏移宽高offset

Element.getBoundingClientRect().width =  border-left-width + padding-left + width + padding-right + border-right-width

Element.getBoundingClientRect().height =  border-top-width + padding-top + height + padding-bottom + border-bottom-width

  上边来分析top、left、right、bottom那八个值

  top:   成分顶部相对于视口的纵坐标

  left:  成分右侧界相对视口的横坐标

  right: 成分右侧界绝对视口的横坐标

  bottom:成分底部相对于视口的纵坐标

bottom = top + height
right = left + width

  [注意]该方法的有所属性值都不曾单位,且给定的是因素在页面中相对于视口的岗位

  难点又来了,相对于视口和相对于页面有啥样界别。理论上,与absolute和fixed的区别类似,但显示上与它们正相反。发生滚动时,fixed成分保持不动是为了保证与视口的原有距离;而发出滚动时,getBoundingClientRect()方法的top、left、right、bottom那四个值相应的产生变动,是因为成分地点移动了,与视口距离自然也改成了

bug

  IE7-浏览器把视口的左上角坐标设置为(2,二),别的浏览器则将(0,0)作为源点坐标

<body style="margin:0">
<div id="test" style="width: 100px;height: 50px;padding: 10px;line-height: 200px;overflow:scroll;border:1px solid black">内容</div>    
<script>
//chrome/firefox/safari/IE8+ 0 72(50+10+10+1+1)
//IE7- 2 74(72+2)
console.log(test.getBoundingClientRect().top,test.getBoundingClientRect().bottom)

//chrome/firefox/safari/IE8+ 0 122(100+10+10+1+1)
//IE71 2 124(122+2)
console.log(test.getBoundingClientRect().left,test.getBoundingClientRect().right)
</script>
</body>

兼容

  能够应用IE7-浏览器中性子节点的specified属性达成浏览器度和胆识别

function getBoundingClientRect(obj){
    var temp = obj.getBoundingClientRect();
    //IE7-浏览器
    if(Boolean(obj.attributes[0]) && !obj.attributes[0].specified){
        return{
            left: temp.left -2,
            top: temp.top -2,
            right: temp.right -2,
            bottom: temp.bottom -2
        }
    }else{
        return temp;
    }    
}

 

一、offsetTop 再次回到的是数字,而 style.top
再次回到的是字符串,除了数字外还含有单位:px。
二、offsetTop 只读,而 style.top 可读写。
3、假使没有给 HTML 元素钦命过 top 样式,则 style.top
再次来到的是空字符串。

荧屏可用工作区宽度:window.screen.availHeight,和浏览器非亲非故,显示器相关
荧屏可用工作区中度:window.screen.availWidth,和浏览器非亲非故,荧屏相关
网页可见区域宽:document.body.clientWidth
,html中body可视区域的宽clientWidth =
width+padding,不包含滚动条,缩放后随着变
网页可见区域高:document.body.clientHeight
,html中body可视区域的高clientHeight =
height+padding,不包蕴滚动条,缩放的时候随着变
网页可知区域宽:document.body.offsetWidth
,html中body的宽(包涵边线的宽offsetWidth = width + border +
padding恐怕offsetWidth=clientWidth+border) 
网页可知区域高:document.body.offsetHeight
,html中body的高(包涵边线的宽offsetHeight  = width + border +
padding或许offsetHeight=clientHeight+border)
网页正文全文宽:document.body.scrollWidth
,html中body的其实增长幅度,即对象的宽度加上可滚动宽度
网页正文全文高:document.body.scrollHeight,html中body的骨子里中度,即对象的万丈加上可滚动中度
网页被卷去的高:document.body.scrollTop, html中body向下滚动过的距离
网页被卷去的左:document.body.scrollLeft ,html中body向右滚动过的相距
网页正文部分上:window.screenTop
,浏览器窗口的左上角在显示屏上的x坐标,只读属性
网页正文部分左:window.screenLeft
,浏览器窗口的左上角在显示器上的y坐标,只读属性
荧屏分辨率的高:window.screen.height,荧屏的高,浏览器非亲非故,显示器相关
显示器分辨率的宽:window.screen.width,显示屏的宽,浏览器毫不相关,显示屏相关

rectObject=object.getBoundingClientRect();

getClientRects()

  getClientRects()方法与getBoundingClientRect()不一致,该方法是3个赶回成分的数个矩形区域的类数组对象。各种类数组对象的参数与getBoundingClientRect()方法一致,种种矩形都有bottom、height、left、right、top和width五个特性,表示它们相对于视口的多少个坐标,以及自俺的莫大和宽窄

  如果选用于块级元素,则getClientRects()[0]和getBoundingClientRect()的性质重返相同的值,且IE7-浏览器在getClientRects()方法中,同样存在视口左上角坐标被设置为(2,二)的bug

<body style="margin:0">
<div id="test" style="width: 100px;height: 50px;padding: 10px;line-height: 200px;overflow:scroll;border:1px solid black">内容</div>    
<script>
//其他浏览器返回0 0, IE7-浏览器返回 2 2 
console.log(test.getClientRects()[0].top,test.getBoundingClientRect().top)
//其他浏览器返回0 0, IE7-浏览器返回 2 2 
console.log(test.getClientRects()[0].left,test.getBoundingClientRect().left)
//72(50+10+10+1+1) 72
console.log(test.getClientRects()[0].height,test.getBoundingClientRect().height)
</script>

  实际上,该情势首要用来内联成分,内联成分有多少行,该方法返回的靶子有微微个分子。这么些措施首要用于判断行内元素是或不是换行,以及行内成分的每一行的任务偏移

<body style="margin:0">
<div style="width:100px;">
Hello World
Hello World
Hello World
</div>
<script>
console.log(el.getClientRects().length); // 3
console.log(el.getClientRects()[0].left); // 0
console.log(el.getClientRects()[0].right); // 88
console.log(el.getClientRects()[0].bottom); // 17
console.log(el.getClientRects()[0].height); // 16
console.log(el.getClientRects()[0].width); // 88
</script>
</body>

 

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与
style.height 也是均等道理。

HTML精鲜明位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight:表示成分的总中度,包蕴由于溢出而望洋兴叹出示在网页的不可知部分
scrollWidth:表示成分的总幅度,包含由于溢出而不可能浮今后网页的不可知部分
注:(一).未有滚动条时,scrollHeight与clientHeight属性结果卓越,scrollWidth与clientWidth属性结果非常
     
 (二).存在滚动条时,但成分设置宽高大于等于成分内容宽高时,scroll和client属性的结果格外
     
 (3).存在滚动条,但成分设置宽高级小学于成分内容宽高,即存在内容溢出的景况时,scroll属性大于client属性
scrollLeft:表示被隐形在剧情区域右边的像素数。成分未滚动时,scrollLeft的值为0,假若成分被水平滚动了,scrollLeft的值大于0,且代表元素左边不可知内容的像素宽度
scrollTop:表示被埋伏在内容区域上方的像素数。成分未滚动时,scrollTop的值为0,若是成分被垂直滚动了,scrollTop的值大于0,且表示成分上方不可知内容的像素高度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent
属性钦命的父坐标的万丈
offsetLeft:获取对象相对于版面或由 offsetParent
属性钦定的父坐标的盘算右边地点
offsetTop:获取对象相对于版面或由 offsetTop
属性钦点的父坐标的测算顶端地方
event.clientX:相对文书档案的水准座标
event.clientY:相对文书档案的垂直座标
event.offsetX:绝对容器的程度坐标
event.offsetY:相对容器的垂直坐标
document.documentElement.scrollTop:垂直方向滚动的值
event.clientX+document.documentElement.scrollTop:相对文书档案的水平座标+垂直方向滚动的量

重返值是二个DOMRect对象,即DOMRect={x:scrollLeft,y:scrollY,width:val一,height:val2,top:topPosition,left:leftPosition,bottom:bottomPosition,right:rightPosition}共捌个属性。

elementFromPoint()

  getBoundingClientRect(x,y)方法使我们能在视口中判断成分的岗位。但有时候我们想转头,判定在视口中的钦点地点上有何因素。那能够用Document对象的elementFromPoint()方法来判定。传递X和Y坐标(相对于视口),该措施选用在内定坐标的最上层和最里层的Element对象。借使钦点的点在视口以外,elementFromPoint()重临null

  [注意]最上层是指z-index最大的成分;最里层是指最里层的子成分

  这么些方法能够用来检查评定成分是还是不是产生重叠或是碰撞

<body style="margin:0">
<div id="test" style="width: 100px;height: 100px;">
    123
</div>
<script>
console.log(document.elementFromPoint(2,2).id); //span1
</script>

scrollHeight: 获取对象的轮转中度。
scrollLeft:设置或得到位于对象右边界和窗口中如今可知内容的最左端之间的距离
scrollTop:设置或取得位于对象最上端和窗口中可见内容的最上端之间的离开
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent
属性钦赐的父坐标的惊人
offsetLeft:获取对象绝对于版面或由 offsetParent
属性钦命的父坐标的预计右边地方
offsetTop:获取对象相对于版面或由 offsetTop
属性内定的父坐标的总计顶端地方
event.clientX 相对文书档案的档次座标
event.clientY 绝对文书档案的垂直座标
event.offsetX 相对容器的档次坐标
event.offsetY 绝对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop
相对文书档案的水平座标+垂直方向滚动的量

IE,FireFox 差别如下:

兼容性:

如上海重机厂大指IE之中,FireFox差别如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width – border
clientHeight = height – border
offsetWidth = width
offsetHeight = height
(须要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均非亲非故系);

IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

[1] CSS spec for ‘use’
element 规定了用来
<use>
成分的  ‘symbol’ 成分要设置暗许的 width 和 height 为 百分百。spec for
width and height ‘svg’
attributes 也需要将
百分百 作为默许值。谷歌 Chrome 未有如约这一个规定。同时 Chrome
也不会将 stroke-width 参预总结。所以 Chrome 和 Firefox
浏览器的 getBoundingClientRect() 再次来到的或是是例外的。

IE———————
网页可知区域宽 document.body.clientWidth
网页可知区域高 document.body.clientHeight
网页可知区域宽(蕴含边线的宽) document.body.offsetWidth
网页可知区域高(包含边线的宽) document.body.offsetHeight
网页正文全文宽 document.body.scrollWidth
网页正文全文高 document.body.scrollHeight
网页被卷去的高 document.body.scrollTop
网页被卷去的左 document.body.scrollLeft
网页正文部分上 window.screenTop
网页正文部分左 window.screenLeft
4858美高梅 ,显示器分辨率的高 window.screen.height
荧屏分辨率的宽 window.screen.width
荧屏可用工作区中度 window.screen.availHeight
荧屏可用工作区宽度 window.screen.availWidth

IE5.0/5.5:
clientWidth = width – border
clientHeight = height – border
offsetWidth = width
offsetHeight = height

[2]
在IE八也许更低浏览器版本中,getBoudingClientRect()方法再次回到的TextRectangle对象没有height和width属性。同时,额外的性格(包含height和width)也不可能添加到TextRectangle对象中去。

复制代码 代码如下:

(须要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均非亲非故)

[3] Gecko 1.9.1
将 width 和 height 属性加入到 DOMRect 对象中。

//对象坐标
var oRect =
document.getElementById(“divHotImg”).getBoundingClientRect();
x=oRect.left
y=oRect.top
//alert(“(“+x+”,”+y+”)”)

div.style.top:绝对于div所在的构件的顶部距离

从 Gecko 1二.0(Firefox 1二.0 / Thunderbird 1二.0 / SeaMonkey 二.九)
起初,总计成分的疆界矩形会将 CSS
transforms 思索进来。

if(ns4||ns6){
x = e.pageX;
y = e.pageY;
}

要获取窗口的尺码,对于不一样的浏览器,须求运用分裂的天性和艺术:若要检验窗口的真实性尺寸,在Netscape下需求采用Window的属性;在
IE下须要深入Document内部对body进行检查评定;在DOM环境下,若要得到窗口的尺码,必要注意根成分的尺码,而不是因素。

[4] IE 和 艾德ge 再次回到的是2个不带有 x, y 属性的 MSDN: ClientRect 对象

您只怕感兴趣的篇章:

  • javascript跟随鼠标x,y坐标移动的字效果
  • JavaScript获取鼠标坐标的函数(包容IE、FireFox、Chrome)
  • javascript 事件目标坐标事件作证
  • JavaScript与Div对层定位和活动获得坐标的贯彻代码
  • js与jquery中获得当前鼠标的x、y坐标地方的代码
  • js 获取坐标
    通过JS拿到当前关键(鼠标)的坐标属性
  • 基于JavaScript完结获取鼠标点击地点坐标的办法
  • JavaScript获取鼠标移动时的坐标(包容IE捌、chome谷歌(谷歌(Google))、Firefox)
  • javascript获得当前鼠标坐标的措施
  • javascript实时获得鼠标坐标值并展现的方式
  • javascript获得文书档案坐标和视口坐标

Window对象的innerWidth属性包含当前窗口的个中宽度。Window对象的innerHeight属性包罗当前窗口的中间中度。

在测算边界矩形,会设想视口区域(或别的滚动操作)内的轮转操作,当滚动地点产生变动时,多少个角的属性值也会发出转移,因而他们的值是相对于视口的不是相对的,如若您供给相对于漫天网页左上角永恒的属性值,只需求给四个角的属性值加被骗前的轮转地点,在接济回到支持x,y属性的浏览器中,只需求用多少个角的属性值减去x,y的属性值,即可获得与当前滚动地点非亲非故的值。或然经过window.scrollX
和window.scrrollY来博取当前滚动地方。

Document对象的body属性对应HTML文书档案的价签。Document对象的documentElement属性则表示HTML文书档案的根节点。

document.body.clientHeight代表HTML文书档案所在窗口的此时此刻中度。document.body.
clientWidth表示HTML文书档案所在窗口的如今上涨幅度。

浏览器大小调整事件
window.onresize=funName;//当浏览器大小产生变化时调用funName函数

getBoundingClientRect()那几个艺术重回叁个矩形对象,包涵多少个属性:left、top、right和bottom。分别表示成分各边与页面顶端和左边的距离。
var box=document.getElementById(‘box’); // 获取成分
alert(box.getBoundingClientRect().top); // 成分上面距离页面顶端的偏离
alert(box.getBoundingClientRect().right); //
成分左侧距离页面左侧的偏离
alert(box.getBoundingClientRect().bottom); //
成分上边距离页面顶端的离开
alert(box.getBoundingClientRect().left); // 成分左侧距离页面右侧的距离
瞩目:IE、Firefox三+、Opera9.伍、Chrome、Safari辅助,在IE中,暗中认可坐标从(2,②)初阶总括,导致最终离开比别的浏览器多出多个像素,大家要求做个门道11分。
document.documentElement.clientTop; // 非IE为0,IE为2
document.documentElement.clientLeft; // 非IE为0,IE为2
functiongGetRect (element) {
  var rect = element.getBoundingClientRect();
  var top = document.documentElement.clientTop;
  var left= document.documentElement.clientLeft;
  return{
    top : rect.top – top,
    bottom : rect.bottom – top,
    left : rect.left – left,
    right : rect.right – left
  }
}
分级增加外边据、内边距、边框和滚动条,用于测试全部浏览器是不是一律。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有