client,offset,scroll相关的计算疑问?

<!DOCTYPE html>
<html lang="en">
<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>distance</title>
    <style>
        html,body{margin: 0;padding: 0;}
        .grandfather{width: 600px;height: 600px;position: relative;left: 50px;top: 50px;border: 5px solid #c1c1c1;}
        .father{width: 450px;height: 450px;position: absolute;   top: 50px;left: 50px;border: 10px solid #d1d1d1;}
        .self{width: 200px;height: 200px;margin: 50px;padding: 20px;border: 10px solid #b1b1b1;background-color: skyblue;/* 中文不换行 */white-space:nowrap;overflow: auto;}
    </style>
</head>
<body>
    <br><br><br><br>
    <div class="grandfather">
        <div class="father">
            <div class="self" id="self">
                金樽清酒斗十千，玉盘珍羞直万钱。
                <br><br>
                停杯投箸不能食，拔剑四顾心茫然。
                <br><br>
                欲渡黄河冰塞川，将登太行雪满山。
                <br><br>
                闲来垂钓碧溪上，忽复乘舟梦日边。
                <br><br>
                行路难！行路难！多歧路，今安在？
                <br><br>
                长风破浪会有时，直挂云帆济沧海。
                <br><br>
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div>
        </div>
    </div>
<script>
    var self = document.getElementById("self");

    // client 获取的是盒子可视的大小
    console.log(self.clientWidth);
    console.log(self.clientHeight);

    // offset 获取的是盒子的所占的大小(实际大小是 border+ padding+ width/height)
    console.log(self.offsetWidth);      //260=200+2*20+2*10
    console.log(self.offsetHeight);     //260=200+2*20+2*10

    //  scroll 获取的是盒子中内容的真实高度
    console.log(self.scrollWidth);
    console.log(self.scrollHeight);
</script>
</body>
</html>

I have a question! About...

对于clientHeight, offsetHeight, scrollHeight, 在控制台得出的值, 我只能勉强知道offsetHeight的计算方式,

但是另外两个是如何计算得到的呢, 因为存在滚动条, 这样的计算不太清楚, 恳求各路大神施以援手, 希望说的通俗易懂又很详细呢~

专注程序不可自拔

浏览 887回答 2

2回答

随时随地看视频慕课网APP