取得窗口大小 兼容所有浏览器的js代码_javascript技巧
程序员文章站
2022-04-24 09:17:22
...
取得窗口大小的代码:
var pageWidth = window.innerWidth,
var pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == "number"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
我们首先把window.innerWidth和window.innerHeight的值分别付给了pageWidth和pageHeight。然后检查pageWidth中保存的是不是一个数值;如果不是,则通过document.compatMode来确定页面是否处于标准模式。如果是,则分别使用document.documentElement.clientWidth和document.documentElement.clientHeight的值。否则,就使用document.body.clientWidth和document.body.clientHeight的值。
取得窗口位置的代码:
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
这两个例子目的是取得窗口左边和上边的位置,首先运用二元操作符判断screenLeft属性和screenTops属性是否存在,如果存在(在IE、Safari、Opera和Chrome中),则取这两个属性的值。如果不存在(在Firefox中),则取screenX和screenY的值。
复制代码 代码如下:
var pageWidth = window.innerWidth,
var pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == "number"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
我们首先把window.innerWidth和window.innerHeight的值分别付给了pageWidth和pageHeight。然后检查pageWidth中保存的是不是一个数值;如果不是,则通过document.compatMode来确定页面是否处于标准模式。如果是,则分别使用document.documentElement.clientWidth和document.documentElement.clientHeight的值。否则,就使用document.body.clientWidth和document.body.clientHeight的值。
取得窗口位置的代码:
复制代码 代码如下:
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
这两个例子目的是取得窗口左边和上边的位置,首先运用二元操作符判断screenLeft属性和screenTops属性是否存在,如果存在(在IE、Safari、Opera和Chrome中),则取这两个属性的值。如果不存在(在Firefox中),则取screenX和screenY的值。
上一篇: php 5.4 传引用 报错
下一篇: PHP图片简单上传功能详解
推荐阅读
-
文本框中,回车键触发事件的js代码[多浏览器兼容]_javascript技巧
-
文本框中,回车键触发事件的js代码[多浏览器兼容]_javascript技巧
-
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)_javascript技巧
-
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)_javascript技巧
-
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码_javascript技巧
-
js代码实现的加入收藏效果并兼容主流浏览器_javascript技巧
-
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)_javascript技巧
-
JS获取各种浏览器窗口大小的方法_javascript技巧
-
多浏览器兼容性比较好的复制到剪贴板的js代码_javascript技巧
-
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]_javascript技巧