如果你相信一件事,就去相信,不用等别人来告诉你行或者不行!早安!你不能改变过去,但你可以改变未来。早安!争气永远比生气漂亮。
在前端的动态逻辑中,有时候需要使用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的总高度 包括border padding margin alert($(window).width());//浏览器当前窗口可视区域宽度 alert($(document).width());//浏览器当前窗口文档对象宽度 alert($(document.body).width());//浏览器当前窗口文档body的宽度 alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin
本文javascript获取屏幕,浏览器及网页的宽度和高度到此结束。有努力就会成功!小编再次感谢大家对我们的支持!