Javascript、Jquery获取浏览器和屏幕各种高度宽度

Javascript:

alert(document.body.clientWidth);        //网页可见区域宽(body)

alert(document.body.clientHeight);       //网页可见区域高(body)

alert(document.body.offsetWidth);       //网页可见区域宽(body)，包括border、margin等

alert(document.body.offsetHeight);      //网页可见区域宽(body)，包括border、margin等

alert(document.body.scrollWidth);        //网页正文全文宽，包括有滚动条时的未见区域

alert(document.body.scrollHeight);       //网页正文全文高，包括有滚动条时的未见区域

alert(document.body.scrollTop);           //网页被卷去的Top(滚动条)

alert(document.body.scrollLeft);           //网页被卷去的Left(滚动条)

alert(window.screenTop);                     //浏览器距离Top

alert(window.screenLeft);                     //浏览器距离Left

alert(window.screen.height);                //屏幕分辨率的高

alert(window.screen.width);                 //屏幕分辨率的宽

alert(window.screen.availHeight);          //屏幕可用工作区的高

alert(window.screen.availWidth);           //屏幕可用工作区的宽

Jquery

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

$(selector).resize(function)
//参数:function,可选;规定当发生 resize 事件时运行的函数。

resize()事件或者说方法是干嘛的，其实看字面上的意思我们就待该知道这是跟重定义（re）大小（size）相关的，官方给它的定义就是：当调整浏览器窗口的大小时，发生 resize 事件。 resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。

案例如下：

//求购物车列表高度跟浏览记录高度
$(window).resize(function() {
        var winH = $(window).outerHeight();//窗口高度
        var shopCardH = $('.bd_toolbar_panels .title').outerHeight() + $('.bd_toolbar_panelFooter').outerHeight();//购物车列表高度
	var brows_historyH = $('.bd_toolbar_panels .title').outerHeight();   //浏览记录高度
	var sch = Math.abs(winH - shopCardH);
	var bhh = Math.abs(winH - brows_historyH);
	$('.shopCard_list').height(sch);
	$('.brows_history').height(bhh);				   
});

该方法求出随着屏幕缩放购物车列表跟浏览记录高度的大小。

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/397

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！