zoukankan      html  css  js  c++  java
  • javascript 的各种 width、height

    1.窗口大小:

    查看《javascript高级程序设计》一书的 Page162,得出结论:

    1.无法取得兼容所有浏览器的 浏览器窗口的总大小( outerWidth() && outerHeigth() ),(safari和firefox可以)

    2.除ie之外的浏览器都可以获得视口(viewport)的大小( innerWidth() && innerHeigth() )。

    3.在大多浏览器中保存了document.documentElement.clientWidth 和 document.documentElement.clientHeight;

      (但是 ie6 必须保证是在 标准模式下才有效),如果是混杂模式则,需要document.body.clientWidth 和 document.body.clientHeight

    所以:此书提供了获取 页面视口大小的 方法(包括滚动条的宽度):

    var pageWidth=window.innerWidth, pageHeight=window.innerHeight;
    
    if( typeof pageWidth !=="number" ){                  //支持IE而写(因为ie9以后才支持innerWidth/innerHeight直取)
         if(document.compatMode=="CSS1Compat"){          // 标准模式下
             pageWidth=document.documentElement.clientWidth;
             pageHeight=document.documentElement.clientHeight;
         }else {                                         //怪异模式下
             pageWidth=document.body.clientWidth;
             pageHeight=document.body.clientHeight;
         }
    }


    2.文档大小:

    滚动区域大小之前一直不大理解scrollHeight和scrollWidth 的意思 ,这本书确实很好。参看P264

    带有滚动条时:通常认为<html>是web浏览器中滚动的元素,所以带有滚动条的页面的总高度是:

    document.documentElement.scrollHeight
    不带滚动条时:由于各个浏览器的不兼容,要想获得文档(基于视口的最小高度)的总高度,必须取得scrollHeightclientHeight的最大值。

    var docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)

    ie混杂模式下,需要用document.body 替代 document.documentElement(判断方法同前)


    3.元素大小

    offsetHeight;offsetWidth  (包括内容+padding+border+滚动条的高度宽度(不包括margin))

    元素的客户区大小

    clientWidth;clientHeight(包括内容+padding)


    那么利用jquery呢?如下:

    获取浏览器显示区域的高度 : $(window).height();
    获取浏览器显示区域的宽度 :$(window).width();   //应该指的是可视区域,包含滚动条在内
    获取页面的文档高度 :$(document).height();
    获取页面的文档宽度 :$(document).width();

    获取滚动条到顶部的垂直高度 :$(document).scrollTop();
    获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

    计算元素位置和偏移量
    offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
    offset(options, results)
    options.relativeTo  指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
    options.scroll  是否把 滚动条计算在内,默认TRUE
    options.padding  是否把padding计算在内,默认false
    options.margin   是否把margin计算在内,默认true
    options.border  是否把边框计算在内,默认true


    下面代码可以获得浏览器滚动条的宽度,

        /*!  
         * 获取浏览器竖向滚动条宽度  
         * 首先创建一个用户不可见、无滚动条的DIV,获取DIV宽度后,  
         * 再将DIV的Y轴滚动条设置为永远可见,再获取此时的DIV宽度  
         * 删除DIV后返回前后宽度的差值  
         *  
         * @return    Integer     竖向滚动条宽度  
         */  
        function getScrollWidth() {  
          var noScroll, scroll, oDiv = document.createElement("DIV");  
          oDiv.style.cssText = "position:absolute; top:-1000px; 100px; height:100px; overflow:hidden;";  
          noScroll = document.body.appendChild(oDiv).clientWidth;  
          oDiv.style.overflowY = "scroll";  
          scroll = oDiv.clientWidth;  
          document.body.removeChild(oDiv);  
          return noScroll-scroll;  
        }  








  • 相关阅读:
    [Windows]wmic查看运行进程的参数
    Java8中的foreach跳出循环break/return
    Python Learning(6)字典
    SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(三): 整合阿里云 OSS 服务 -- 上传、下载文件、图片
    SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(四): 整合阿里云 短信服务、整合 JWT 单点登录
    SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑
    Servlet、Jsp
    BIO、NIO、AIO
    HashMap (JDK1.8) 分析
    mysql常见笔试题
  • 原文地址:https://www.cnblogs.com/hdchangchang/p/3965421.html
Copyright © 2011-2022 走看看