window.innerWidth以及window.outerWidth的区别

window.outerWidth获取浏览器窗口外部的宽度。 它表示整个浏览器窗口的宽度,包括边栏
window.innerWidth获取浏览器可视区域的宽度,也就是页面的宽度


<html>
<body>

<p id="demo">p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
script>

body>
html>

!DOCTYPE html>
<html>
<body>

<p id="demo">p>

<script>
var w = window.outerWidth


var h = window.outerHeight


var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
script>

body>
html>

由于IE6获取可视区域大小的属性与其他浏览器不兼容 我们有必要些一个兼容所有浏览器的函数

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

if(typeof pageWidth != "number"){
      if(document.compatMode == "CSS1Compat"){
     pageWidth = document.documentElement.clientWidth;
     pageHeight = document.document.documentElement.clientHeight;
     }else{
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
 }
}

你可能感兴趣的:(javascript)