在前端的动态逻辑中,有时候需要使用js获取浏览器可视区域,屏幕或是网页的宽度和高度。那么在原生的js代码是能让jq插件中是如何操作的呢?
原生js获取各个对象的高度和宽度
js代码:
IE浏览器:document.body.clientWidth//BODY对象宽度
document.body.clientHeight//BODY对象高度
document.documentElement.clientWidth//可见区域宽度
document.documentElement.clientHeight//可见区域高度
FireFox浏览器:document.body.clientWidth//BODY对象宽度
document.body.clientHeight//BODY对象高度
document.documentElement.clientWidth//可见区域宽度
document.documentElement.clientHeight//可见区域高度
Opera浏览器:document.body.clientWidth//可见区域宽度
document.body.clientHeight//可见区域高度
document.documentElement.clientWidth//页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight//页面对象高度(即BODY对象高度加上Margin高)
获取其他参数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);//屏幕可用工作区的宽
jq获取浏览器以及网页的各个参数
相对原生的js代码来说,jquery操作起来要简单的很高。
注意:以下代码使用之前,一定要加载jquery.js
jq代码:alert($(window).height());//浏览器当前窗口可视区域高度
alert($(document).height());//浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括borderpaddingmargin
alert($(window).width());//浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括borderpaddingmargin