var bodyWidth =document.body.clientWidth; //网页可见区域宽
var bodyHeight =document.body.clientHeight; //网页可见区域高
var bodyWidthWithBorder =document.body.offsetWidth; //网页可见区域宽(包括边线的宽)
var bodyHeightWithBorder=document.body.offsetHeight; //网页可见区域高(包括边线的宽)
var bodyWidthWithScroll =document.body.scrollWidth; //网页正文全文宽
var bodyHeightWithScroll=document.body.scrollHeight; //网页正文全文高
var bodyTopHeight =document.body.scrollTop; //网页被卷去的上边距
var bodyLeftWidth =document.body.scrollLeft; //网页被卷去的左边距
var windowTopHeight =window.screenTop; //网页正文部分上边距
var windowLeftWidth =window.screenLeft; //网页正文部分左边距
var screenHeight =window.screen.height; //屏幕分辨率的高
var screenWidth =window.screen.width; //屏幕分辨率的宽
var screenAvailHeight =window.screen.availHeight; //屏幕可用工作区高度
var screenAvailWidth =window.screen.availWidth; //屏幕可用工作区宽度
IE与FF下共同支持与不支持的属性研究,以及取值的差异:
以下是IE新开页面屏幕计算默认值:
FF与IE都支持(计算有差异)网页可见区域宽【document.body.clientWidth】:1239
FF与IE都支持(计算有差异)网页可见区域高【document.body.clientHeight】:0
FF与IE都支持(计算有差异)网页可见区域宽【document.body.offsetWidth】:1239
FF与IE都支持(计算有差异)网页可见区域高【document.body.offsetHeight】:0
FF与IE都支持(计算有差异)网页正文全文宽【document.body.scrollWidth】:1239
FF与IE都支持(计算有差异)网页正文全文高【document.body.scrollHeight】:0
FF与IE都支持(计算相同)网页被卷去的高【document.body.scrollTop】:0
FF与IE都支持(计算相同)网页被卷去的宽【document.body.scrollLeft】:0
只支持IE:网页正文部分上【window.screenTop】:144
只支持IE:网页正文部分左【window.screenLeft】:0
FF与IE都支持(计算相同):屏幕分辨率的高【window.screen.height】:1024
FF与IE都支持(计算相同):屏幕分辨率的宽【window.screen.width】:1280
FF与IE都支持(计算相同):屏幕可用工作区高度【window.screen.availHeight】:990
FF与IE都支持(计算相同):屏幕可用工作区宽度【window.screen.availWidth】:1280
FF与IE都支持(计算有差异):窗体左【document.body.offsetLeft】与右【document.body.offsetTop】:10和15
FF与IE都支持(计算有差异):窗体高【document.body.offsetWidth】与宽【document.body.offsetHeight】:1239和0
垂直方向滚动的值【document.documentElement.scrollTop】:0
只支持FF浏览器整个宽高,不包括工具条【window.innerHeight】:undefined
FF与IE都支持(计算有差异)网页内容可视区域的高度【document.documentElement.clientHeight】:820
FF与IE都支持(计算相同):获取位于对象最顶端和窗口中可见内容的最顶端之间的距离【document.documentElement.scrollTop】:0
以下是FF新开页面屏幕计算默认值:
以下是新开页面屏幕计算默认值:
FF与IE都支持(计算有差异)网页可见区域宽【document.body.clientWidth】:1264
FF与IE都支持(计算有差异)网页可见区域高【document.body.clientHeight】:0
FF与IE都支持(计算有差异)网页可见区域宽【document.body.offsetWidth】:1264
FF与IE都支持(计算有差异)网页可见区域高【document.body.offsetHeight】:0
FF与IE都支持(计算有差异)网页正文全文宽【document.body.scrollWidth】:1264
FF与IE都支持(计算有差异)网页正文全文高【document.body.scrollHeight】:0
FF与IE都支持(计算相同)网页被卷去的高【document.body.scrollTop】:0
FF与IE都支持(计算相同)网页被卷去的宽【document.body.scrollLeft】:0
只支持IE:网页正文部分上【window.screenTop】:undefined
只支持IE:网页正文部分左【window.screenLeft】:undefined
FF与IE都支持(计算相同):屏幕分辨率的高【window.screen.height】:1024
FF与IE都支持(计算相同):屏幕分辨率的宽【window.screen.width】:1280
FF与IE都支持(计算相同):屏幕可用工作区高度【window.screen.availHeight】:990
FF与IE都支持(计算相同):屏幕可用工作区宽度【window.screen.availWidth】:1280
FF与IE都支持(计算有差异):窗体左【document.body.offsetLeft】与右【document.body.offsetTop】:0和0
FF与IE都支持(计算有差异):窗体高【document.body.offsetWidth】与宽【document.body.offsetHeight】:1264和0
垂直方向滚动的值【document.documentElement.scrollTop】:0
只支持FF浏览器整个宽高,不包括工具条【window.innerHeight】:829
FF与IE都支持(计算有差异)网页内容可视区域的高度【document.documentElement.clientHeight】:858
FF与IE都支持(计算相同):获取位于对象最顶端和窗口中可见内容的最顶端之间的距离【document.documentElement.scrollTop】:0
以上数据表明:在FF与IE下,在计算屏幕宽度时,FF比IE多 25个像素.
分享到:
相关推荐
Javascript获取页面、屏幕尺寸大小参数
这有助于您根据屏幕尺寸编写条件代码,或获取屏幕尺寸值 安装 npm install --save use-screen-size yarn add use-screen-size 例子 这是显示屏幕宽度,屏幕高度和当前屏幕模式的快速示例 import React from 'react' ...
获取屏幕的尺寸需要使用Dimensions,直接从node_mules中引入即可。
javascript中获得屏幕中和浏览器中所有的尺寸方法 很全很细 包你满意 欢迎下载
这是一个Vue套件,可帮助您根据屏幕尺寸编写条件代码,或获取屏幕尺寸值 安装 安装npm软件包: npm install --save screen-size-vue # OR yarn add screen-size-vue 在您的main.js中添加Vue插件: import Vue ...
2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM...
实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...
useful-JavaScript-Fragment本项目包含如下内容(还会...避免了网上常见的获取display:none元素的宽高时因盲目使待获取元素脱离文本流而导致的尺寸塌陷的问题。2、从屏幕中间放大一个元素(详见 scale_fromcenter1.htm
响应式控件将通过动态列可见性控件自动针对不同的屏幕尺寸优化表格的布局,从而使表格在桌面和移动屏幕上都非常有用。 安装 使用响应式获取软件的主要方法是使用。 您还可以包括的各个文件。 有关完整的详细信息,请...
一 获取元素的CSS大小 1.通过style内联获取元素的大小 代码如下: var box = document.getElementById(‘box’); // 获得元素; box.style.width; // 200px; box.style.height; // 200px; // PS:style...
英语修订 适用于英语A-Level学生的简单javascript闪卡程序 使用一个json数据库来过滤194个抽认卡问题=='...在所有屏幕尺寸下均响应(小尺寸图像未显示) 献给我的女儿夏洛特(Charlotte),她在封锁期间不得不忍受我!
//获取屏幕宽度并动态赋值 var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) ...
30.4.htm 设置屏幕对象的尺寸 30.5.htm 有选择地显示图片 30.6.htm 简单的性能检测 30.7.htm 模拟浏览器菜单 第31章(\cha31) 31.1.htm 实现md5加密 31.2....
用于执行屏幕尺寸相关任务的简单 Angular API。 窗口上的单个调整大小侦听器以获得最佳性能 ngIf 样式指令 绑定变量以始终反映屏幕大小 绑定回调以在屏幕更改时触发 执行一次性任务,如加载数据 创建自定义规则或...
Js通过浏览器对象模型(BOM)来和浏览器进行交互,可以获取屏幕尺寸,窗口大小,页面地址,历史记录等浏览器相关信息,也可以控制浏览器执行某些行为:弹出信息,页面跳转,打开窗口,关闭窗口,调整窗口大小等。...
在设计倒计时功能时,开发者需要考虑到用户界面的清晰度和易读性,以及在不同设备和屏幕尺寸上的兼容性。此外,为了提高用户体验,倒计时的刷新频率和动画效果也需要精心设计,以避免给用户造成不必要的干扰。 由于...
安装了Materialize框架并创建了网格系统,我在整个项目中都使用了该网格系统来定期检查集成内容如何缩放较小的屏幕尺寸。 创建的cards.js文件可存储一整套纸牌,包括图像,值和名称。 生成了开始游戏功能,以将...
android studio项目实例 android常用图片特效处理.zip android超炫的图片浏览器.zip Android仿美图秀秀和IOS系统的相机胶卷.zip ...获取手机屏幕尺寸的代码段.zip 获取手机通讯录的实战应用(含SIM卡中的联系人).zip