js和jQuery 获取屏幕高度、宽度
2013-11-18 10:18
357 查看
js获取屏幕高度,宽带
网页可见区域宽: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 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 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相对文档的水平座标+垂直方向滚动的量
jQuery获取屏幕高度、宽度
做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下。alert($(window).height());//浏览器当前窗口可视区域高度
alert($(document).height());//浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括borderpaddingmargin
alert($(window).width());//浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括borderpaddingmargin
//获取页面的高度、宽度
functiongetPageSize(){
varxScroll,yScroll;
if(window.innerHeight&&window.scrollMaxY){
xScroll=window.innerWidth+window.scrollMaxX;
yScroll=window.innerHeight+window.scrollMaxY;
}else{
if(document.body.scrollHeight>document.body.offsetHeight){//allbutExplorerMac
xScroll=document.body.scrollWidth;
yScroll=document.body.scrollHeight;
}else{//ExplorerMac...wouldalsoworkinExplorer6Strict,MozillaandSafari
xScroll=document.body.offsetWidth;
yScroll=document.body.offsetHeight;
}
}
varwindowWidth,windowHeight;
if(self.innerHeight){//allexceptExplorer
if(document.documentElement.clientWidth){
windowWidth=document.documentElement.clientWidth;
}else{
windowWidth=self.innerWidth;
}
windowHeight=self.innerHeight;
}else{
if(document.documentElement&&document.documentElement.clientHeight){//Explorer6StrictMode
windowWidth=document.documentElement.clientWidth;
windowHeight=document.documentElement.clientHeight;
}else{
if(document.body){//otherExplorers
windowWidth=document.body.clientWidth;
windowHeight=document.body.clientHeight;
}
}
}
//forsmallpageswithtotalheightlessthenheightoftheviewport
if(yScroll<windowHeight){
pageHeight=windowHeight;
}else{
pageHeight=yScroll;
}
//forsmallpageswithtotalwidthlessthenwidthoftheviewport
if(xScroll<windowWidth){
pageWidth=xScroll;
}else{
pageWidth=windowWidth;
}
arrayPageSize=newArray(pageWidth,pageHeight,windowWidth,windowHeight);
returnarrayPageSize;
}
//滚动条
document.body.scrollTop;
$(document).scrollTop();
相关文章推荐
- JQuery插件官网汇总
- JQuery插件官网汇总
- Jquery简单插件应用
- 封装的jquery翻页滚动(示例代码)
- jquery定时器的简单代码
- jQuery技巧大放送
- jquery之ajaxfileupload异步上传插件
- 封装的jquery翻页滚动(示例代码)
- jquery cookie的用法总结
- Jquery通过Ajax访问XML数据的小例子
- jQuery客户端分页实例代码
- Jquery取得iframe下内容的方法
- jQuery选择器总结2
- jquery插件开发规范
- jQuery mouseover弹出title以及弹出大图的例子
- Jquery中DOM操作(详细)
- jquery-ui autocomplete 自动完成功能
- jquery 鼠标经过放大图片
- jQuery复制文本内容到剪贴板插件 ZeroClipboard
- 实用兼容性比较好的jQuery图片裁剪插件CropZoom