100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 如何获取html的页面宽度和高度 js获取屏幕 浏览器及网页的宽度和高度

如何获取html的页面宽度和高度 js获取屏幕 浏览器及网页的宽度和高度

时间:2023-11-20 00:04:19

相关推荐

如何获取html的页面宽度和高度 js获取屏幕 浏览器及网页的宽度和高度

在前端的动态逻辑中,有时候需要使用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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。