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








原文地址:https://www.cnblogs.com/hdchangchang/p/3965421.html