window.innerWidth以及window.outerWidth的区别

最新推荐文章于 2024-05-10 17:27:37 发布

完美零du

最新推荐文章于 2024-05-10 17:27:37 发布

阅读量7.4k

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/sinat_32067081/article/details/53056201

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<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;
 }
}

完美零du

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
window.innerWidth以及window.outerWidth的区别

window.outerWidth获取浏览器窗口外部的宽度。它表示整个浏览器窗口的宽度，包括边栏 window.innerWidth获取浏览器可视区域的宽度，也就是页面的宽度<!DOCTYPE html><html><body><p id="demo"></p><script>var w = window.innerWidth|| document.documentElement.cli
复制链接

扫一扫

专栏目录