标签
HTML
正则表达式
Json
包管理工具
vite
CSS
XPath
JavaScript
Jquery
less
ES6
Vue
React
vue 3
Layui
editor.md
sea.js
Zepto.js
mysql.js
mssql.js
NodeJs
Express
前端template
YAML
杂项
外部链接
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() --窗口(浏览器视口)的高度


扫一扫手机看
点击排行
订阅号
...