首页
学习
活动
专区
圈层
工具
发布

js获取网页屏幕可视区域高度

==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 看了以上代码,可能会有疑问说body和可见区域到底有什么不同呢,我们在console...原因就是:在浏览器默认的情况下,body有8-10px左右的边距,而可见区域包括了这个边距,因此如果我们用到body{padding:0;margin:0;}来消除这种默认的情况。...以下是兼容主流浏览器(IE/Firefox/Chrome/Safari)获取浏览器窗口可视区域(不包括滚动条)和滚动条位置的代码: ? ?...1 // 获取浏览器窗口的可视区域的宽度 2 function getViewPortWidth() { 3 return document.documentElement.clientWidth...|| document.body.clientWidth; 4 } 5 6 // 获取浏览器窗口的可视区域的高度 7 function getViewPortHeight() { 8

10.8K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth...: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽...要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在 IE下需要深入Document内部对body进行检测;在DOM环境下...TR/xhtml1/DTD/xhtml1-transitional.dtd"> 请调整浏览器窗口...--显示浏览器窗口的实际尺寸--> 浏览器窗口 的 实际高度: 浏览器窗口 的 实际宽度:

    9.9K30

    JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转)

    网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:document.body.offsetWidth...: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth...要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要 深入Document内部对body进行检测;在DOM环境下...TR/xhtml1/DTD/xhtml1-transitional.dtd"> 请调整浏览器窗口...--显示浏览器窗口的实际尺寸--> 浏览器窗口 的 实际高度: 浏览器窗口 的 实际宽度: <input

    17.7K10

    js获取各种高度总结

    在写js的时候偶尔需要获取各种高度,比如;浏览器高度,页面高度,滚动高度等。抽空整理了我自己常用到的,时间仓促,没有考虑到万恶的IE浏览器。。。。...获取屏幕的高度和宽度(屏幕分辨率): window.screen.height window.screen.width 获取屏幕工作区域的高度和宽度(去掉状态栏): window.screen.availHeight...window.screen.availWidth 网页全文的高度和宽度: document.body.scrollHeight document.body.scrollWidth 滚动条卷上去的高度和向右卷的宽度...: document.body.scrollTop document.body.scrollLeft 网页可见区域的高度和宽度(不加边线): document.body.clientHeight document.body.clientWidth...网页可见区域的高度和宽度(加边线): document.body.offsetHeight document.body.offsetWidth

    14.9K20

    获取窗口客户区域、标题栏高度、菜单栏高度、边框宽度正确方法

    一直以来都没真正理解窗体宽高和菜单宽高以及客户区域的宽高,今天测试一下发现收获了很多知识,在C#中如果FormStyle是FixedSingle,那么窗体这个this.Width就是客户区域+标题栏,先前一直以为菜单栏和客户区域分布都会占用窗体宽高...,结果发现,菜单栏只是悬浮在客户区域,而不是菜单栏在上,客户区域在下。...=this.Width-this.ClientSize.Width; 菜单栏的高度=menustrip1.Height 由于菜单实际悬浮在客户区域,其实我们在实际运用是不考虑菜单宽高对我的控件位置大小。...还有我看了网上用SystemInformation.MenuHeight和SystemInformation.CaptionHeight,这个用法是获取系统默认的菜单栏的高度和标题栏的高度,但是这个并不一定是我当前真实的菜单栏的高度和标题栏的高度...因为系统默认的菜单栏的高度和标题栏的高度可能会被修改,比如我自己就手动改了,结果算出来默认宽高和我利用上述公式实际算出来不一样的。

    18500

    javascript 获取多种主流浏览器显示页面高度(转)

    ==> 可见区域宽度 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.body.clientWidth 网页可见区域高: document.body.clientHeight...--显示浏览器窗口的实际尺寸--> 12 浏览器窗口 的 实际高度: 13 浏览器窗口 的

    1.1K20
    领券