javascript 元素三大系列

2020-05-01

offset系列

offsetLeft:元素距离左边位置的值。

未脱离文档流

父级元素margin-left + 父级元素padding-left + 父级元素border-left + 自己的margin-left

脱离文档流

父级元素padding-left + 自己的margin-left

offsetTop:元素距离上面位置的值。

未脱离文档流

父级元素margin-top + 父级元素padding-top + 父级元素border-top + 自己的margin-top

脱离文档流

父级元素padding-top + 自己的margin-top

offsetWidth:获取元素的宽度。

自己的border-left + 自己的border-right + 自己的padding-left + 自己的padding-right + 自己的width

offsetHeight:获取元素的高度。

自己的border-top + 自己的border-bottom + 自己的padding-top + 自己的padding-bottom + 自己的height

scroll系列

scrollLeft:元素向左卷曲出去的距离。

scrollTop:元素向上卷曲出去的距离。

scrollWidth:元素中内容的实际的宽度。

如果没有内容,或者内容很少就是元素的宽度。

自己的padding-left + 自己的padding-right + 自己的width

scrollHeight:元素中内容的实际的高度。

如果没有内容,或者内容很少就是元素的高度。

自己的padding-top + 自己的padding-bottom + 自己的height

client系列

clientLeft:左边框的宽度。

clientTop:上边框的宽度。

clientWidth:可视区域的宽度,没有边框。

自己的padding-left + 自己的padding-right + 自己的width

clientHeight:可视区域的高度,没有边框。

自己的padding-top + 自己的padding-bottom + 自己的height

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 500px;
            height: 300px;
            padding: 12px;
            border: 15px solid blue;
            background-color: gray;
            margin: 100px;
            /*position: absolute;*/
            /*top: 100px;*/
            /*left: 100px;*/
        }

        #div {
            width: 200px;
            height: 100px;
            background-color: green;
            border: 12px solid red;
            margin-left: 8px;
            margin-top: 10px;
            padding: 2px;
            /*overflow: auto;*/
        }
    </style>
</head>
<body>
<div id="box">
    <div id="div">
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
        testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
    </div>
</div>
<script>
    let div = document.getElementById("div");
    // console.log(div.offsetLeft);
    // console.log(div.offsetTop);
    // console.log(div.offsetWidth);
    // console.log(div.offsetHeight);

    console.log(div.scrollLeft);
    console.log(div.scrollTop);
    console.log(div.scrollWidth);
    console.log(div.scrollHeight);

    // console.log(div.clientLeft);
    // console.log(div.clientTop);
    // console.log(div.clientWidth);
    // console.log(div.clientHeight);
</script>
</body>
</html>