关于页面、盒子的大小和位置的标签

凤殊殁缪

已于 2023-02-22 16:40:33 修改

阅读量135

点赞数 1

文章标签：前端 css html5 javascript

于 2023-02-22 16:15:09 首次发布

本文链接：https://blog.csdn.net/qq_62223782/article/details/129159300

版权

什么是浏览器的页面，什么是浏览器的窗口

获取视口的大小

clientHeight和clientWidth

获取网页文档内容大小的方法(不包括溢出的内容:margin)

offsetWidth和offsetHeight

视口升级滚动条专属版

scrollWidth和scrollHeight

什么是浏览器的页面，什么是浏览器的窗口

首先我们得了解：

1、浏览器页面：

浏览器页面的大小是由内容的多少和样式决定的，可以这么说，浏览器页面就是由内容撑开的区域。

2、浏览器窗口：

浏览器窗口，是我们浏览网页时当前可见的那部分，又叫做viewport（视口）

了解了上面这两，我们可以知道，浏览器页面跟浏览器窗口并不是同一个东西。

他们的大小也不相同。

1、

当网页中的所有内容可以在浏览器窗口中全部显示的时候，浏览器页面的大小也就等于浏览器窗口的大小。

2、

当不能全部显示，就会在窗口中产生滚动条，滑动滚动条才可以浏览整个浏览器页面的内容

由此，我们可以进行以下方法属性的调用，来得到浏览器页面、浏览器窗口即他们里面的元素的大小和位置。

获取视口的大小

clientHeight和clientWidth

网页中的每个元素都有两个属性：

1、clientHeight

2、clientWidth

在知道他们的作用之前，我们得了解一个元素的组成：

除去怪异盒模型之外，一个元素一般都是由：

内容（content）+内填充（padding）+边框（border）

组成的

模型如下：

而我们的clientWidth和clientHeight就只是包括padding和content部分的内容：

内容（content）+内填充（padding）

我们想获取视口的大小时，就可以利用此属性：

<script>
    //获取页面的视口宽度
    document.documentElement.clientWidth
    //获取页面的视口高度
    document.documentElement.clientHeight
</script>

但是我们要注意的是：

1、clientWidth和clientHeight必须要在页面加载完后才能运行，否则对象还没生成，直接会报错

2、他们是只读属性，不能进行赋值

3、只包括padding和content部分，边框、滚动条和视窗之外的内容都不包括

元素时：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<style>
    div {
        width: 600px;
        height: 400px;
        border: 20px solid #900;
        margin: 0 auto;
    }
</style>

<body>
    <div></div>
</body>
<script>
    var div = document.querySelector('div')
    console.log(div.clientWidth);
    console.log(div.clientHeight);
</script>

</html>

此时我们可以看下控制台：

可以很清楚的看出，他并没有包括边框的那部分

他的返回值是一个数值

获取网页文档内容大小的方法(不包括溢出的内容:margin)

offsetWidth和offsetHeight

1、offsetWidth

2、offsetHeight

这种方法属性跟上面的就有所区别了，他所包括的地方是上面的扩容版：

内容（content）+内填充（padding）+边框（border）

也就是他包括了几乎所有的内容，要注意的是，他并不包括溢出的部分（元素中不包括margin）。

获取DOM文档的根节点html元素对象的高度，有可能小于视口高度（由文档内容高度决定，不包括溢出的内容margin）

内容（content）+内填充（padding）+边框（border）+滚动条宽度（scroll）+视窗之外的内容

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<style>
    div {
        width: 600px;
        height: 400px;
        border: 20px solid #900;
        margin: 0 auto;
    }
</style>

<body>
    <div></div>
</body>
<script>
    console.log(document.documentElement.offsetWidth);
    console.log(document.documentElement.offsetHeight);
    var div = document.querySelector('div')
    console.log(div.offsetWidth);
    console.log(div.offsetHeight);
</script>

</html>

他的返回值是一个数值