js中各种宽和高_js window.innerwidth-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_53438035/article/details/119808600

屏幕尺寸（screen）

window.screen.heiht和window.screen.availHeight
在这里插入图片描述
window.screen.width=window.screen.availWidth

浏览器尺寸（inner和outer）

window.innerHeight和window.outerHeight
在这里插入图片描述
window.innerWidth和window.outerWidth

window.innerWidth会受开发者工具影响

截至上述所有均包含滚动条

页面尺寸（client和offset）

Element.clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.

Element.clientWidth同理
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
   
    div{
        width: 3000px;
        height: 3000px;
        padding: 100px;
        overflow-y: scroll;
        overflow-x: scroll;
    }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div=document.querySelector("div");
        console.log(div.clientWidth);
        console.log(div.clientWidth);
    </script>
</body>
</html>

效果：
在这里插入图片描述

注意：

滚动条加在div上而不是body上所以要减去（要注意滚动条是谁的）
overflow是子元素超出后该如何表现一般加在父元素上

Element.offsetHeight包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。（height+border+padding）

Element.offsetWidth同理
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    
    div{
        width: 3000px;
        height: 3000px;
        border: solid 200px;
        padding: 100px;
        overflow-y: scroll;
        overflow-x: scroll;
        
    }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div=document.querySelector("div");
        console.log(div.offsetHeight);
        console.log(div.offsetWidth);
    </script>
</body>
</html>

效果：
在这里插入图片描述

width包含了内容和滚动条。

滚动

Element

1

Element.scrollHeight=Element.clientHeight

Element.scrollWidth同理

2

Element.scrollHeight:被卷去的高度，有两个成立的条件：
1：其内容比自己高
2：其要有滚动条（scroll）

document

1

document.documentElement.scrollHeight=height + padding + border

document.documentElement.scrollWidth同理

2

document.document.scrollTop可以直接使用

document.document.scrollTop和Element.scrollTop的区别:

<style type="text/css">
    html{
        width: 3000px;
        height: 3000px;
        border: solid 200px;
        padding: 100px;
    }
    </style>
    <script>
        document.addEventListener("wheel",(e)=>{
            console.log(document.documentElement.scrollTop);
        })
    </script>

有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .a{
        width: 3000px;
        height: 3000px;
        border: solid 200px;
        padding: 100px;
    }
    </style>
</head>
<body>
    <div class="a"></div>
</body>
<script>
    var div=document.querySelector(".a");
    div.addEventListener("wheel",(e)=>{
        console.log(div.scrollTop);
    })
</script>
</html>

无效

加上高度超过自身的子元素和滚轴：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .a{
        width: 3000px;
        height: 3000px;
        border: solid 200px;
        padding: 100px;
        overflow-y: scroll;
    }
    .b{
        height: 3200px;
    }
    </style>
</head>
<body>
    <div class="a"><div class="b"></div></div>
</body>
<script>
    var div=document.querySelector(".a");
    div.addEventListener("wheel",(e)=>{
        console.log(div.scrollTop);
    })
</script>
</html>