• 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;  
        }  








  • 相关阅读:
    数组迭代方法
    promise
    Gulp执行预处理
    第一个gulp 项目
    vue 单元素过渡
    webpack 入门
    webpack初始化
    v-for 指令
    ajax 工作原理
    面试小问题
  • 原文地址:https://www.cnblogs.com/hdchangchang/p/3965421.html
Copyright © 2020-2023  润新知