jquery 中怎么获取浏览器宽度和高度
$(window).height(); //浏览器当前窗口可视区域高度
$(document).height(); //浏览器当前窗口文档的高度
$(document.body).height();//浏览器当前窗口文档body的高度
$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度 包括border padding margin
$(window).width(); //浏览器当前窗口可视区域宽度
$(document).width();//浏览器当前窗口文档对象宽度
$(document.body).width();//浏明庆览器当前窗口文档body的高度
$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度 包括border padding margin
// 获取页面的高度、宽度
function getPageSize() {
var xScroll, yScroll;
if (window.innerHeight window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else {
if (document.body.scrollHeight document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
激穗握 yScroll = document.body.offsetHeight;
}
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if (document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else {
if (document.documentElement document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
族哪 } else {
if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
}
}
// for small pages with total height less then height of the viewport
if (yScroll windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll windowWidth) {
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageSize;
}
// 滚动条
document.body.scrollTop;
$(document).scrollTop();
请问如何通过jquery获取页面内容的高度?
1.方法如下:
获取浏览器显示区域(可视区域)的高度 :
$(window).height();
获取浏览器显示区域(可视区域)的宽度 :
$(window).width();
获取页面的文档高度
$(document).height();
获取页面的文档宽度 :
$(document).width();
浏览器当前窗口文档body的高度:
$(document.body).height();
浏览器当前窗口文档body的宽度:
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
$(document).scrollTop();
获取滚动条到左边的垂直宽度 :
$(document).scrollLeft();
获取或设置元素的宽度:
$(obj).width();
获取或设置元素的高度:
$(obj).height();
某个元素毁烂银的上边界到body最顶部的距离:obj.offset().top;(在元素纤宴的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)
返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)
返回当前元素的左边界到它的包历让含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)
2.代码如下:
//返回当前页面高度
function pageHeight(){
if($.browser.msie){
return document.compatMode == "CSS1Compat"? document.documentElement.clientHeight :
document.body.clientHeight;
}else{
return self.innerHeight;
}
};
//返回当前页面宽度
function pageWidth(){
if($.browser.msie){
return document.compatMode == "CSS1Compat"? document.documentElement.clientWidth :
document.body.clientWidth;
}else{
return self.innerWidth;
}
};
JS和jquery获取各种屏幕的宽度和高度
Javascript:
启逗灶网页可见区域宽 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
JQuery:
$(document) ready(function(){
alert($(window) height()); //浏览器当前窗口可视区域高度
alert($(document) height()); //浏览器当前窗口文档的高度
alert($(document body) height());//浏览器当前窗口文档body的高度
alert($(document body) outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window) width()); //浏览器当前窗口可视区域宽度
alert($(document) width());//浏览器当前窗口文档对象宽度
alert($(document body) width());//浏览器当前窗口文档body的宽度
alert($(document body) outerWidth(true));//浏览器当前窗口文指世档body的总宽度 包括border padding margin
lishixinzhi/Article/program/Java/JSP/201311/20160
JS获取body的高度
1、document.body.clientWidth;//网页可见区域宽
2、document.body.clientHeight;//网页可见区域高
3、document.body.offsetWidth;//网页可见区域宽(包括边线的宽)
4、document.body.offsetHeight;//网页可见区域高(包括边线的高)
5、document.body.scrollWidth;//网页正文全文宽
6、window.screen.availHeight;//屏幕可用工作区高度
7、window.screen.availWidth;//屏幕可用工作区宽度
8、alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
9、alert($(document.body).width());//浏览器时下窗口文档body的高度
扩展资料:
1、alert($(window).height()); //浏览器时下窗口可视区域高度
2、alert($(document).height()); //浏览器时下窗口文档的高度
3、alert($(document.body).height());//浏览器时下者燃窗口文档body的高度
4、alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
5、alert($(window).width()); //浏览器时下窗口可视庆敏区域宽度
6、alert($(document).width());//浏览器时下窗口文档首差虚对于象宽度
7、alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
8、alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度
jQ如何获得网页实际高度?
1、新建一个html文件。
2、为了更好察乎罩区分,会创建两个按钮标签,然后给这两个按钮标签添加不同的id。
3、引入jquery文件(注:jquery的引入路径一定要正确)。
4、创建加载完成函数,然后创建一个点击按钮获取当前id的函数。
5、保存好html文件后使用浏览器打开,然后点击按钮即可看到点击的id。
6、页面所有代码,如有不懂可把所有代码复制到新建的败闹顷镇html文件上,然后修改引入的jquery文件即可。
jquery—获取元素高度方法 (总结)
$("#div_id").height();
// 获得的是该div本身的高度, (不包含padding,margin,border)
$("#div_id").outerHeight();
// 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)
$("#div_id").outerHeight(true);
// 包含该div本身的高度, 以及padding,border,margin上下的总高度
$(window).height();
// 获取浏览器显示区域(可视区域)的高度
$(window).width();
// 获取页面的文档高度
$(document).height();
// 浏览器当前窗口文档的高度
$(document.body).width();
// 浏览器当前窗口文档body的高度
$(document).scrollTop();
// 获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
obj.offset().top
// 某个元模带派素的上边界到body最顶部的距离(在行缺元素的包含元素不含滚旦贺动条的情况下)