来自 Web前端 2020-04-22 21:17 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

js获取网页相对边距网上澳门金莎娱乐

时间: 2019-09-15阅读: 108标签: 边距1.getBoundingClientRect()

Javascript获取获取屏幕、浏览器窗口 ,浏览器,网页高度、宽度的大小

getBoundingClientRect 用于获取某个元素相对于视窗的位置集合。集合中有 top, right, bottom, left 等属性。

屏幕可用工作区宽度: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,屏幕的宽,浏览器无关,屏幕相关

let client = e.target.getBoundingClientRect();client.width // 宽度client.height // 高度client.top // 上边距(相对可视区域上方)client.right // 右边距(相对可视区域右方)client.bottom // 下边距(相对可视区域下方)client.left // 左边距(相对可视区域左方)client.x // x 轴坐标/left (相对可视区域左方)client.y // y 轴坐标/top (相对可视区域上方)

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight:表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分
scrollWidth:表示元素的总宽度,包括由于溢出而无法展示在网页的不可见部分
注:(1).没有滚动条时,scrollHeight与clientHeight属性结果相等,scrollWidth与clientWidth属性结果相等
       (2).存在滚动条时,但元素设置宽高大于等于元素内容宽高时,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:相对文档的水平座标+垂直方向滚动的量

网上澳门金莎娱乐,2.获取浏览器网页的相关高度/宽度

IE,FireFox 差异如下:

body 对象的宽/高

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

document.body.clientWidth // body 对象宽度document.body.clientHeight // body 对象高度

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

可见区域宽/高

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

document.documentElement.clientWidth // 可见区域宽度document.documentElement.clientHeight // 可见区域高度

div.style.top:相对于div所在的元件的顶部距离

网页正文全文宽/高

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在 IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

document.body.scrollWidthdocument.body.scrollHeight

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

网页上方滚动的上/左侧边距

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

document.body.scrollTop // 上方滚动距离(手机/平板)document.body.scrollLeft // 左侧滚动距离(手机/平板)document.documentElement.scrollTop // 上方滚动距离document.documentElement.scrollLeft // 左侧滚动距离window.pageXOffset // 上方滚动距离 window.scrollX 别名window.pageYOffset // 左侧滚动距离 window.scrollY 别名

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

网页宽/高(包括边线的宽/高)

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

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:js获取网页相对边距网上澳门金莎娱乐

关键词: