首页 > 技术文章 > 获取各种高度宽度方法总结

qdog 2017-05-25 13:31 原文

Javascript获取方法总结:

    • document.body.clientWidth/Height,网页可见区域宽/高(body),包括content、padding,可以把document.body换成document.documentElement、div或者其他元素。
    • document.body.offsetWidth/Height,网页可见区域宽/高(body),包括content、padding、border,可以把document.body换成document.documentElement、div或者其他元素。
    • document.body.scrollWidth/Height,网页正文全文宽,包括有滚动条时的未见区域(所到之处,莫非王土),可以把document.body换成document.documentElement、div或者其他元素。
    • document.body.scrollTop/Left,获取随着滚动条滚动网页被卷去(隐藏)的那部分距离,jQuery有一个scrollTop/Left()方法不填参数就是获取填参数就是设置。
    • window.screenTop/Left,浏览器距离屏幕顶端和左侧的距离,火狐不支持,其他浏览器都支持。
    • window.screenX/Y,功能同上,IE不支持,其他浏览器都支持。
    • window.screen.width/height,返回显示屏幕的宽高
    • window.screen.availWidth/Height,返回显示屏幕的宽高 (除 Windows 任务栏之外)。
    • window.innerWidth/Height,可视区域宽高+滚动条的厚度。
    • window.outerWidth/Height,包含滚动条和工具窗口(例如谷歌开发者工具的宽高),但不包括系统任务栏taskbar。

 

jQuery获取方法总结:

    • 获取浏览器显示区域(可视区域)的宽高, $(window).width()/height(),window是顶级对象,代表浏览器窗口。
    • 获取页面的文档宽高   $(document).width()/height(),document是window的一个属性,代表当前文档。
    • 浏览器当前窗口文档body的宽高,$(document.body).width()/height(),随body里内容的多少而变化
    • 获取/设置滚动条到顶部的垂直高度 (即网页被卷上去的高度)  $(document).scrollTop();   
    • 获取/设置滚动条到左边的垂直宽度 :$(document).scrollLeft(); 
    •  
    • 获取或设置元素的宽高:$(obj).width()/height()
    • 烦人
    • obj.offset().top/left:获取或设置匹配元素相对于文档的偏移(位置)。设置:$("p").offset({top:100,left:0});
 

 

 

 

推荐阅读