关于高度的常见操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
    <style>
        .contianer{
            width: 200px;
            height: 600px;
            padding: 5px;
            border: 1px solid red;
            margin: 20px;
            background-color: rebeccapurple;
        }
        .p{
            height: 500px;
        }
    </style>
</head>
<body id="body">
    <div id="contianer" class="contianer">
        <p class="p">p1</p>
        <p class="p">p2</p>
        <p class="p">p3</p>
    </div>
    <script>
        var div = document.getElementById("contianer");
        console.log("div总宽度(包含padding,不包含boder和margin)："+div.clientWidth);
        console.log("div总高度(包含padding,不包含boder和margin)："+div.clientHeight);
        console.log("视口高度："+document.documentElement.clientHeight);
        console.log("页面高度："+document.body.clientHeight);
        console.log("页面高度："+div.scrollHeight);
        console.log("视口高度："+document.documentElement.scrollHeight);
        console.log("滚动高度："+document.documentElement.scrollTop);
        console.log("屏幕总宽度："+screen.width);
        console.log("屏幕总高度："+screen.height);
        console.log("屏幕总宽度(不包括任务栏)："+screen.availWidth);
        console.log("屏幕总宽度(不包括任务栏)：："+screen.availHeight);
    </script>
</body>
</html>

1、Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。
13.Browser对象 - 图1 注意： 没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。

Screen 对象属性

属性	说明
availHeight	返回屏幕的高度（不包括Windows任务栏）
availWidth	返回屏幕的宽度（不包括Windows任务栏）
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
height	返回屏幕的总高度
pixelDepth	返回屏幕的颜色分辨率（每象素的位数）
width	返回屏幕的总宽度

2、History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
13.Browser对象 - 图2 注意： 没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

History 对象属性

属性	说明
length	返回历史列表中的网址数

History 对象方法

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

3、存储对象

Web 存储 API 提供了 sessionStorage （会话存储）和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
存储对象属性
| 属性 | 描述 | | —- | —- | | length | 返回存储对象中包含多少条数据。 |

存储对象方法

方法	描述
key(n)	返回存储对象中第 n 个键的名称
getItem(keyname)	返回指定键的值
setItem(keyname, value)	添加键和值，如果对应的值存在，则更新该键对应的值。
removeItem(keyname)	移除键
clear()	清除存储对象中所有的键

Web 存储 API

属性	描述
window.localStorage	在浏览器中存储 key/value 对。没有过期时间。
window.sessionStorage	在浏览器中存储 key/value 对。在关闭窗口或标签页之后将会删除这些数据。

13.Browser对象