Javascript实现获取窗口的大小和位置代码分享


Posted in Javascript onDecember 04, 2014

在Javascript中可以使用OuterWidth,OuterHeight 获取浏览器的大小.用 innerWidth,innerHeight 来获取窗口的大小(除去浏览器边框部分)。对于IE6 及之前版本,要区分是标准模式,还是混杂模式。标准模式使用document.documentElement.clientWidth,document.documentElement.clientHeight;混杂模式使用document.body 的clientWidth,clientHeight。

     (function () {

         var pageWidth = window.innerWidth;

         var pageHeight = window.innerHeight;

         var broswerWidth = window.outerWidth;

         var broswerHeight = window.outerHeight;

         alert(pageWidth + " " + pageHeight);

         alert(broswerWidth + " " + broswerHeight);

         if (typeof pageWidth != "number") {

             if (document.compatMode == "CSS1Compat") {  //The standard mode

                 pageWidth = document.documentElement.clientWidth;

                 pageHeight = document.documentElement.clientHeight;

             } else {

                 pageWidth = document.body.clientWidth;

                 pageHeight = document.body.clientHeight;

             }

         }  

     })();

Javascript实现获取窗口的大小和位置代码分享

获取窗口的位置:IE,chrome,Safari,使用screenLeft,screenTop 来获取窗口距离屏幕左边和屏幕上边的位置。而Firefox不支持此属性,Firefox使用screenXP,screenY 达到同样的效果。

    (function btnFun() {

        var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft :

            window.screenX;

        var topPos = (typeof window.screenTop == "number") ? window.screenTop :

                         window.screenY;

        alert(leftPos + " " + topPos);

        //alert(window.screenLeft+" "+window.screenTop);

    })();
Javascript 相关文章推荐
Javascript 中的类和闭包
Jan 08 Javascript
JQuery魔力之$("tagName")与selector
Mar 05 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 #Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 #Javascript
jquery实现动态画圆
Dec 04 #Javascript
javascript数组遍历for与for in区别详解
Dec 04 #Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 #Javascript
express的中间件cookieParser详解
Dec 04 #Javascript
express的中间件bodyParser详解
Dec 04 #Javascript
You might like
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
react 应用多入口配置及实践总结
2018/10/17 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
在Python中使用列表生成式的教程
2015/04/27 Python
python logging日志模块的详解
2017/10/29 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
python实现udp传输图片功能
2020/03/20 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
中专生自荐信
2013/10/12 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
婚礼主持结束词
2014/03/13 职场文书
机关节能减排实施方案
2014/03/17 职场文书
安全生产大检查方案
2014/05/07 职场文书
安全责任书范文
2014/08/25 职场文书
工厂标语大全
2014/10/06 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
市级三好学生评语
2014/12/29 职场文书
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
Java实现简单小画板
2022/06/10 Java/Android