Home > Web Front-end > JS Tutorial > How does jquery get the scroll bar height of an element and other implementation codes_jquery

How does jquery get the scroll bar height of an element and other implementation codes_jquery

WBOY
Release: 2016-05-16 15:36:04
Original
1765 people have browsed it

Main functions:

获取浏览器显示区域(可视区域)的高度 :  
$(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(在元素的包含元素含滚动条的情况下)
Copy after login
//返回当前页面高度

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;
}
};
Copy after login

The following are additions from other netizens:

Get the height of the browser display area: $(window).height();
Get the width of the browser display area: $(window).width();
Get the document height of the page: $(document).height();

Get the document width of the page: $(document).width();
Get the vertical height of the scroll bar to the top: $(document).scrollTop();
Get the vertical width of the scroll bar to the left: $(document).scrollLeft();
Calculate element position and offset: $(id).offset();

The offset method is a very useful method, which returns the offset information of the first element in the packed set. By default, it is the offset information relative to the body. The result contains two attributes, top and left.

offset(options, results)
options.relativeTo Specify relative calculation
Calculate the ancestor element of the offset position. This element should be positioned relative or absolutely. If omitted, it is relative to body.
options.scroll Whether to put
Scroll bars are included, default TRUE
options.padding Whether to include padding, default false
options.margin
Whether to include margin, default is true
options.border Whether to include the border, default true
Child page controls parent page:
parent.document.documentElement.scrollTop;
parent.document.documentElement.clientHeight;

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template