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

在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;
             }
         } 
     })();

获取窗口的位置：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);
    })();

赞 (0)

相关推荐

  • JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

    js与jquery获得页面大小.滚动条位置.元素位置 复制代码 代码如下: //页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {    // Mozilla    scrW = window.innerWidth + window.scrollMaxX;    scrH = window.innerHeight + window.scrollMaxY

  • JavaScript获取元素尺寸和大小操作总结

    一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + "\n" + obj.width); // 200px 200px typeof=string只是将style属性中的值显示出来 二.获取计算后的样式 复制代码 代码如下: var obj = document.getElementById("test"); var style

  • JS中位置与大小的获取方法

    JS中位置与大小的获取方法

    scrollHeight,clientHeight,offsetHeight的区别 说明: scrollHeight:DOM元素的实际内容的高度,不包border的高度,会随DOM元素中内容的增加(超过可视区后)而变大. clientHeight:DOM元素内容可视区的高度,不包含滚动条和边框的高度. offsetHeight:DOM元素整体的高度,包括滚动条和边框. 当滚动条不出现的时候 这时候DOM元素中没有内容或者内容不超过可视区 scrollWidth=clientWidth,两者皆为可

  • 获取JS中网页各种高宽与位置的方法总结

    获取JS中网页各种高宽与位置的方法总结

    screen对象 获取屏幕的高宽(分辨率) screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系统部件高度之后的值 screen.availHeight //屏幕可用高度 屏幕的像素宽度减去系统部件宽度之后的值 window对象 获得窗口位置及大小 window.screenTop //窗口顶部距屏幕顶部的距离 window.screenLeft //窗口左侧距屏幕左侧的距离 window.i

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

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

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

  • javascript获得网页窗口实际大小的示例代码

    javascript代码: 复制代码 代码如下: function get_page_size() { var re = {}; if (document.documentElement && document.documentElement.clientHeight) { var doc = document.documentElement; re.width = (doc.clientWidth>doc.scrollWidth)?doc.clientWidth-1:doc.scr

  • 利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解

    首先引入JavaScript API文件 <script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script> 此API提供的接口共有6个,geoip_country_code(){国家代码},geoip_country_ name(){国家名称},geoip_city() {城市名称},geoip_region(){地区代码},geoip_latit

  • Js和JQuery获取鼠标指针坐标的实现代码分享

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <ti

  • javascript中实现兼容JAVA的hashCode算法代码分享

    在java中一个hashCode算法,可以用来计算一个字符串的hash值,今天一个朋友突然问俺能不能在js中计算hashCode,要求和java的hashCode计算结果一样. 对于java的hashCode,以前到现在也一直没有了解过其算法,不过猜想应该也不会太难,于是现在java中写了这段代码进行测试: 运行结果:899755 按下Ctrl键点击hashCode方法名跟进去看了下其算法,发现是很简单的几句代码,如下所示: 复制代码 代码如下: public int hashCode() {

  • Go语言实现机器大小端判断代码分享

    golang语言如何判断机器的大小端? 如下代码供参考: 复制代码 代码如下: package main     import (       "fmt"      "unsafe"  )     const N int = int(unsafe.Sizeof(0))     func main() {       x := 0x1234       p := unsafe.Pointer(&x)       p2 := (*[N]byte)(p)     

  • javascript实现动态改变层大小的方法

    本文实例讲述了javascript实现动态改变层大小的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态设置层的大小</title>

  • JavaScript实现获取dom中class的方法

    本文实例讲述了JavaScript实现获取dom中class的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function getClass(node,classname) { if(node.getEle

  • Android编程基础之获取手机屏幕大小(DisplayMetrics应用)示例

    Android编程基础之获取手机屏幕大小(DisplayMetrics应用)示例

    本文实例讲述了Android获取手机屏幕大小的方法.分享给大家供大家参考,具体如下: 这里主要用了三个对象TextView ,Button ,以及DisplayMetrics ,其中Displaymetrics 是取得手机屏幕大小的关键类,这个例子非常的简单,当我们点击按钮,触发事件,在TextView 里显示手机屏幕的宽高分辨率． 看一下效果图: 按钮触发前: 按钮触发后: 其中我们在res->layout->values->string.xml增加了两行如下: <string

  • PHP获取文件夹大小函数用法实例

    本文实例讲述了PHP获取文件夹大小函数用法.分享给大家供大家参考.具体如下: <?php // 获取文件夹大小 function getDirSize($dir) { $handle = opendir($dir); while (false!==($FolderOrFile = readdir($handle))) { if($FolderOrFile != "." && $FolderOrFile != "..") { if(is_dir(

随机推荐