zoukankan      html  css  js  c++  java
  • Javascript获取各种浏览器可见窗口大小

    如果jquery获取 var ws = $(".focusmenu")[0].offsetWidth;   alert(ws);    // 注意[0],因为$(".focusmenu)返回是的一个数组

    1、获取页面元素的宽度或高度时,如果元素没有显示在页面上如是display:none时,这时候获取不到元素的宽=0
      alert($(id).offsetWidth);



    方法:

    1、获取浏览器窗口大小: window.outerWidth 和 window.outerHeight
    2、设置窗口或新窗口打开的位置: window.moveTo(x,y);
    3、将窗口上移、下移或左、右移动: window.moveBy(x,y);
    4、调整窗口宽、高度: window.resizeTo(120,40);
    5、调整窗口大小: window.resizeBy();
    6、网页可见区域宽: document.body.clientWidth
    7、网页可见区域高: document.body.clientHeight
    8、网页可见区域宽: document.body.offsetWidth (包括边线的宽)
    9、网页可见区域高: document.body.offsetHeight (包括边线的高)
    10、网页正文全文宽: document.body.scrollWidth
    11、网页正文全文高: document.body.scrollHeight
    12、网页被卷去的高: document.body.scrollTop 一直都是 0。一翻折腾,原来是 DTD 的问题,要是页面直接用 <html> 开头的话就没有问题了 使用document.documentElement.scrollTop没问题 jquery中写法$(document).scrollTop();
    13、网页被卷去的左: document.body.scrollLeft
    14、网页正文部分上: window.screenTop
    15、网页正文部分左: window.screenLeft
    16、屏幕分辨率的高: window.screen.height
    17、屏幕分辨率的宽: window.screen.width
    18、屏幕可用工作区高度: window.screen.availHeight
    19、屏幕可用工作区宽度: window.screen.availWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
    scrollHeight: 获取对象的滚动高度。
    scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
    scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
    scrollWidth: 获取对象的滚动宽度
    offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
    offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
    offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
    event.clientX 相对文档的水平座标
    event.clientY 相对文档的垂直座标
    event.offsetX 相对容器的水平坐标
    event.offsetY 相对容器的垂直坐标
    document.documentElement.scrollTop 垂直方向滚动的值
    event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

     

    例子
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
    </meta></head>
    <body>
    <h2 align="center">请调整浏览器窗口大小</h2><hr />
    <form action="#" method="get" name="form1" id="form1">
    <!--显示浏览器窗口的实际尺寸-->
    浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />
    浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />
    </form>
    <script type="text/javascript">
    <!--
    var winWidth = 0;
    var winHeight = 0;
    function findDimensions() //函数:获取尺寸
    {

    //获取窗口宽度
    if (window.innerWidth)

    winWidth = window.innerWidth;
    else if ((document.body) && (document.body.clientWidth))
    winWidth = document.body.clientWidth;
    //获取窗口高度
    if (window.innerHeight)

    winHeight = window.innerHeight;
    else if ((document.body) && (document.body.clientHeight))
    winHeight = document.body.clientHeight;
    //通过深入Document内部对body进行检测,获取窗口大小
    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

    {
    winHeight = document.documentElement.clientHeight;
    winWidth = document.documentElement.clientWidth;
    }
    //结果输出至两个文本框
    document.form1.availHeight.value= winHeight;

    document.form1.availWidth.value= winWidth;
    }
    findDimensions();
    //调用函数,获取数值
    window.onresize=findDimensions;


    //-->
    </script>

    </body>
    </html>


    IE6/7/8:对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ; 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ; Safari:safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ; Firefox:火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ; var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

     

    有w3c标准(在页面中添加这行标记的话)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    在IE中:
    document.body.clientWidth ==> BODY对象宽度
    document.body.clientHeight ==> BODY对象高度
    document.documentElement.clientWidth ==> 可见区域宽度
    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.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
    
    没有定义W3C的标准,则
    IE为:
    document.documentElement.clientWidth ==> 0
    document.documentElement.clientHeight ==> 0
    FireFox为:
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
    Opera为:
    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
    

     

    判断浏览器的类型:
    var ua = navigator.userAgent.toLowerCase ();
    var os = new Object();
    os.isFirefox = ua.indexOf ("gecko") != -1;
    os.isOpera = ua.indexOf ("opera") != -1;
    os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;
    

     

     

  • 相关阅读:
    【达梦公开课】视频汇总
    【.NET框架】—— MVC5+EF6实体——连表视图查询(七)
    【.NET框架】—— MVC5+EF6实体模型自动创建(七)
    【.NET框架】—— MVC5+EF进行CRUD(六)
    SqlServer必知必会之个人小笔记
    【.NET框架】—— ASP.NET MVC5路由基础(五)
    【.NET框架】—— MVC5 与jQuery库(四)
    【.NET框架】—— ASP.NET MVC数据验证注解(三)
    面试时写不出排序算法?看这篇就够了——转载《java那些事》微信公众号
    【.NET框架】—— ASP.NET MVC5 表单和HTML辅助(二)
  • 原文地址:https://www.cnblogs.com/couxiaozi1983/p/2391534.html
Copyright © 2011-2022 走看看