以判断图片所在地点是或不是可知来决定加载图片的光阴bet体育在线,关于获取各个浏览器可知窗口大小

在页面包车型客车创设中 平时会须要获得页面包车型大巴部分宽高新闻,例如落实 惰性加载图片
须要取得页面包车型地铁可知区域中度 和
已滚动区域的万丈,以咬定图片所在地方是不是可知来控制加载图片的光阴,

常用:

JS 获取浏览器窗口大小

 1 // 获取窗口宽度
 2 if (window.innerWidth)
 3 winWidth = window.innerWidth;
 4 else if ((document.body) && (document.body.clientWidth))
 5 winWidth = document.body.clientWidth;
 6 // 获取窗口高度
 7 if (window.innerHeight)
 8 winHeight = window.innerHeight;
 9 else if ((document.body) && (document.body.clientHeight))
10 winHeight = document.body.clientHeight;
11 // 通过深入 Document 内部对 body 进行检测,获取窗口大小
12 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
13 {
14 winHeight = document.documentElement.clientHeight;
15 winWidth = document.documentElement.clientWidth;
16 }

花点时间整治了弹指间,获取页面宽高新闻的API

详细:

至于获取各类浏览器可知窗口大小: 
<script> 
function getInfo() 

var s = “”; 
s = ” 网页可知区域宽:” document.body.clientWidth; 
s = ” 网页可知区域高:” document.body.clientHeight; 
s = ” 网页可知区域宽:” document.body.offsetWidth ”
(包含边线和滚动条的宽)”; 
s = ” 网页可知区域高:” document.body.offsetHeight ” (包罗边线的宽)”; 
s = ” 网页正文全文宽:” document.body.scrollWidth; 
s = ” 网页正文全文高:” document.body.scrollHeight; 
s = ” 网页被卷去的高(ff):” document.body.scrollTop; 
s = ” 网页被卷去的高(ie):” document.documentElement.scrollTop; 
s = ” 网页被卷去的左:” document.body.scrollLeft; 
s = ” 网页正文部分上:” window.screenTop; 
s = ” 网页正文部分左:” window.screenLeft; 
s = ” 荧屏分辨率的高:” window.screen.height; 
s = ” 显示屏分辨率的宽:” window.screen.width; 
s = ” 荧屏可用工作区中度:” window.screen.availHeight; 
s = ” 显示屏可用工作区宽度:” window.screen.availWidth;

s = ” 你的荧屏设置是 ” window.screen.colorDepth ” 位彩色”; 
s = ” 你的荧屏设置 ” window.screen.deviceXDPI ” 像素/英寸”; 
//alert (s); 

getInfo(); 
</script> 
在自个儿本地质衡量试在这之中: 
在IE、FireFox、Opera下都得以应用 
document.body.clientWidth 
document.body.clientHeight 
即可获取,很简短,很便宜。 
而在店铺项目个中: 
Opera依旧采用 
document.body.clientWidth 
document.body.clientHeight 
可是IE和FireFox则使用 
document.documentElement.clientWidth 
document.documentElement.clientHeight 
原来是W3C的正儿八经在作怪啊 
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt
要是在页面中添加那行标记的话 在IE中: 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象中度 
document.documentElement.clientWidth ==> 可见区域上涨幅度 
document.documentElement.clientHeight ==> 可知区域高度 
在FireFox中: 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象中度 
document.documentElement.clientWidth ==> 可见区域上涨幅度 
document.documentElement.clientHeight ==> 可知区域低度 

在Opera中: 
document.body.clientWidth ==> 可知区域上涨幅度 
document.body.clientHeight ==> 可知区域高度 
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽) 
document.documentElement.clientHeight ==>
页面对象高度(即BODY对象中度加上Margin高) 
而假如没有定义W3C的正儿八经,则 
IE为: 
document.documentElement.clientWidth ==> 0 
document.documentElement.clientHeight ==> 0 
FireFox为: 
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight
==> 页面对象中度(即BODY对象高度加上Margin高) 
Opera为: 
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight
==> 页面对象中度(即BODY对象中度加上Margin高)

四处整治中…

在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象中度
document.documentElement.clientWidth ==> 可知区域涨幅
document.documentElement.clientHeight ==> 可知区域高度

在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象中度
document.documentElement.clientWidth ==> 可知区域上涨幅度
document.documentElement.clientHeight ==> 可知区域中度

在Opera中: 
document.body.clientWidth ==> 可知区域上涨幅度
document.body.clientHeight ==> 可知区域中度
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==>
页面对象中度(即BODY对象高度加上Margin高)

而只要没有概念W3C的规范,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox为:
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight
==> 页面对象中度(即BODY对象中度加上Margin高)

Opera为:
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight
==> 页面对象中度(即BODY对象中度加上Margin高)
当成一件劳心事情,其实就支出来看,宁可少一些对象和章程,不选拔最新的正规化要便于广大啊。

 

 

网页可见区域宽:
document.body.clientWidth

网页可知区域高:
document.body.clientHeight 

网页可知区域宽:
document.body.offsetWidth(包含边线的宽) 

网页可知区域高:
document.body.offsetHeight(包含边线的宽) 

网页正文全文宽:
document.body.scrollWidth 

网页正文全文高:
document.body.scrollHeight 

网页被卷去的高:
document.body.scrollTop 

window.pageYOffset

网页被卷去的左:
document.body.scrollLeft 

window.pageXOffset

网页正文部分上:
window.screenTop 

网页正文部分左:
window.screenLeft 

显示器分辨率的高:
window.screen.height 

显示器分辨率的宽:
window.screen.width 

显示器可用工作区中度:
window.screen.availHeight 

荧屏可用工作区宽度:
window.screen.availWidth 

相关文章