JS 获取屏幕大小,元素大小,元素位置案例
function a(){
document.write(
"屏幕分辨率为:"+screen.width+"*"+screen.height
+"<br />"+
"屏幕可用大小:"+screen.availWidth+"*"+screen.availHeight
+"<br />"+
"网页可见区域宽:"+document.body.clientWidth
+"<br />"+
"网页可见区域高:"+document.body.clientHeight
+"<br />"+
"网页可见区域宽(包括边线的宽):"+document.body.offsetWidth
+"<br />"+
"网页可见区域高(包括边线的宽):"+document.body.offsetHeight
+"<br />"+
"网页正文全文宽:"+document.body.scrollWidth
+"<br />"+
"网页正文全文高:"+document.body.scrollHeight
+"<br />"+
"网页被卷去的高:"+document.body.scrollTop
+"<br />"+
"网页被卷去的左:"+document.body.scrollLeft
+"<br />"+
"网页正文部分上:"+window.screenTop
+"<br />"+
"网页正文部分左:"+window.screenLeft
+"<br />"+
"屏幕分辨率的高:"+window.screen.height
+"<br />"+
"屏幕分辨率的宽:"+window.screen.width
+"<br />"+
"屏幕可用工作区高度:"+window.screen.availHeight
+"<br />"+
"屏幕可用工作区宽度:"+window.screen.availWidth
);
}
浏览器获取滚动条高度的方法
浏览器
APIIE6/7/8 document.documentElement.scrollTop
IE9及以上 window.pageYOffset 或者 document.documentElement.scrollTop
Safari window.pageYOffset或者document.body.scrollTop
Firefo xwindow.pageYOffset 或者 document.documentElement.scrollTopChromedocument.documentElement.scrollTop
备注
很多技术博客上面说Chrome只能使用document.body.scrollTop来获取滚动条的高度。
但是我在测试的时候发现,Chrome不能使用document.body.scrollTop,只能使用document.documentElement.scrollTop来获取滚动条的高度。
如果使用document.body.scrollTop,那么所获得的数值始终是0。
不过大家不用过意在意这一点,我们直接封装一个函数来获取滚动条的高度即可。
封装获取滚动条高度的函数
function getScrollTop() {
var scroll_top = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scroll_top = document.documentElement.scrollTop;
}
else if (document.body) {
scroll_top = document.body.scrollTop;
}
return scroll_top;}
js获取元素到浏览器顶部距离:
Element.offsetTop
jq获取和设置元素到浏览器顶部距离:
$(Element).offset().top
$(Element).offset({top:number})
jquery获取元素的高度
width() --元素的宽度。
height() --元素的高度。
innerWidth() --元素的宽度(包括内边距)。
innerHeight() --元素的高度(包括内边距)。
outerWidth() --元素的宽度(包括内边距和边框)。
outerHeight() --元素的高度(包括内边距和边框)。
outerWidth(true) --元素的宽度(包括内边距、边框和外边距)
outerHeight(true) --元素的高度(包括内边距、边框和外边距)。
$(document).height() --文档(HTML 文档)的高度
$(window).height() --窗口(浏览器视口)的高度