javascript中获取元素尺寸
1. 浏览器的各种尺寸
Javascript获取获取屏幕、浏览器窗口 ,浏览器,网页高度、宽度的大小
屏幕可用工作区宽度: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,屏幕的宽,浏览器无关,屏幕相关
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:相对文档的水平座标+垂直方向滚动的量
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均无关)
div.style.top:相对于div所在的元件的顶部距离
要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在 IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。
Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
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、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。
document.documentElement.clientTop; // 非IE为0,IE为2
document.documentElement.clientLeft; // 非IE为0,IE为2
function GetRect (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 } }
分别加上外边据、内边距、边框和滚动条,用于测试所有浏览器是否一致。
2. 判断滚动条滚动到最底部
web开发中常见的场景,判断页面是否滚动到最底部,需要用到DOM的三个属性值,scrollTop,clientHeight,scrollHeight。scrollTop是滚动条在Y轴上滚动的距离,clientHeight是DOM可视区域的高度,scrollHeight是内容可视区域的高度加上溢出(滚动)的距离。只要这三个属性值满足scollTop+clientHeight==srollHeight就可以认为已经滚动到底部。代码如下:
//滚动条在Y轴上的滚动距离 function getScrollTop(){ var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if(document.body){ bodyScrollTop = document.body.scrollTop; } if(document.documentElement){ documentScrollTop = document.documentElement.scrollTop; } scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop; } //文档的总高度 function getScrollHeight(){ var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; if(document.body){ bodyScrollHeight = document.body.scrollHeight; } if(document.documentElement){ documentScrollHeight = document.documentElement.scrollHeight; } scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; return scrollHeight; } //浏览器视口的高度 function getWindowHeight(){ var windowHeight = 0; if(document.compatMode == "CSS1Compat"){ windowHeight = document.documentElement.clientHeight; }else{ windowHeight = document.body.clientHeight; } return windowHeight; } window.onscroll = function(){ if(getScrollTop() + getWindowHeight() == getScrollHeight()){ alert("已经到最底部了!!"); } };
如果使用jquery那就更简单了:
$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop + windowHeight == scrollHeight){ alert("已经到最底部了!"); } });
如果判断一个DOM元素是否滚动到底部,是类似的,将document.body换成特定的元素就可以了,获取scrollTop和scrollHeight的方式是一样的,但是获取可见高度的时候需要用到offSetHeight属性,修改一下就可以了。代码如下:
// 滚动条在Y轴上的滚动距离 function getScrollTop(id) { let scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; bodyScrollTop = id ? document.getElementById(id).scrollTop : document.body.scrollTop; documentScrollTop = document.documentElement ? document.documentElement.scrollTop : 0; scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop; } //文档的总高度 function getScrollHeight(id) { let scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; bodyScrollHeight = id ? document.getElementById(id).scrollHeight : document.body.scrollHeight; documentScrollHeight = document.documentElement ? document.documentElement.scrollHeight : 0; scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; return scrollHeight; } //获取元素视口的高度 function getWindowHeight(id) { let windowHeight = 0; if(id) { windowHeight = document.getElementById(id).offsetHeight; } else { if (document.compatMode === "CSS1Compat") { windowHeight = document.documentElement.clientHeight; } else { windowHeight = document.body.clientHeight; } } return windowHeight; } window.document.getElementById("class_goods").onscroll = () => { if(getScrollTop("class_goods") + getWindowHeight("class_goods") === getScrollHeight("class_goods")){ this.page.pageIndex = this.page.pageIndex + 1 this.getProduct() } }
作者:Tyler Ning
出处:http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,请微信联系冬天里的一把火