Javascript之十大常用原理性样例大总结

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

案例一：全选等

运用知识点：ondblclick=（）| onclick | 寻找标签属性及判断和函数的应用

aaarticlea/png;base64,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" alt="" />

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div>

            <input type="button" value="全选" ondblclick="checkAll()" />

            <input type="button" value="取消" ondblclick="cancleAll()" />

            <input type="button" value="反选" ondblclick="reverseAll()" />

        </div>

        <table>

            <thead>

                <tr>

                    <th>序列号</th>

                    <th>用户名</th>

                    <th>年龄</th>

                </tr>

            </thead>

            <tbody id="tb">

                <tr>

                    <td><input class="c1" type="checkbox"/></td>

                    <td>alex</td>

                    <td>19</td>

                </tr>

                <tr>

                    <td><input class="c1" type="checkbox"/></td>

                    <td>alex</td>

                    <td>19</td>

                </tr>

                <tr>

                    <td><input class="c1" type="checkbox"/></td>

                    <td>alex</td>

                    <td>19</td>

                </tr>

                <tr>

                    <td><input class="c1" type="checkbox"/></td>

                    <td>alex</td>

                    <td>19</td>

                </tr>

            </tbody>

        </table>

        <script>

            //全选的话先获取所有的input标签属性，然后全部为true

            function checkAll(){

                var tb = document.getElementById('tb');//获取tb，也就是身体

                var checks = tb.getElementsByClassName('c1');

                //[第一个，2，3，4，5]checked = true

                for (var i=0;i<checks.length; i++){

                    var current_check =  checks[i];//得到每个input的值并赋一个变量名

                     current_check.checked = true;

                }

            }

            function cancleAll(){

                var tb = document.getElementById('tb');//获取tb，也就是身体

                var checks = tb.getElementsByClassName('c1');

                //[第一个，2，3，4，5]checked = true

                for (var i=0;i<checks.length; i++){

                    var current_check =  checks[i];//得到每个input的值并赋一个变量名

                     current_check.checked = false;

                }

            }

            function reverseAll(){

                var tb = document.getElementById('tb');//获取tb，也就是身体

                var checks = tb.getElementsByClassName('c1');

                //[第一个，2，3，4，5]checked = true

                for (var i=0;i<checks.length; i++){

                    var current_check =  checks[i];//得到每个input的值并赋一个变量名

                     if(current_check.checked <!--这个地方如果为true-->){

                         current_check.checked = false;

                     }else{

                     current_check.checked = true;

                     }

                }

            }

        </script>        

    </body>

</html>

代码及讲解

案例二：单选

要求只能选一个，并且用js可以改变其选项

运用知识点：getElementsByTagName | checked | 互斥

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANkAAABOCAIAAAAivyTaAAAD1klEQVR4nO2bwWrqQBSG8yb2DfSp7osI3Qh9kNSFm1aNFpuCUKSOuBBSqAMWxM1FssxGcxcpIbeTTExq9J/0/3ZNPG065yNn0ua3QkIwsK59AYR8QRcJCnSRoEAXCQp0kaBAFwkKdJGgQBcJCnSRoEAXCQp0kaBAFwkKdJGgQBcJCnSRoEAXCQpmuLjZbKbTab/f7/f70+n08/NT82Erj4tdNikEemMOh8N8Pp/NZuv1erfb7Xa7j4+P19dXIcThcEgt+Wab/kuCA3pj3t7eZrPZX4VIx9QSumgo0I2RUr68vGy32+12+/DwcHd3d3t7+/j4GB2ZTCZSSrWKM9pQoBszGo0Wi4WUstfr/UnQ6/WklEKI0WikVvG+aCjQjel2u+/v71LKdruddLHT6UgpPc/rdrtqFV00lGobM5lMWq2WZVk3NzeLxaJo+f39vd5F27bVKs5oQ6m2Mc1mMzag1WoVLR8Oh0IIzYweDoe534TymUK1ffrhDWm1Wo3HYyllpGOn02m325GIUkrHcVar1SnXUOrayaWptk+NRiMWsdlsFi0PgsB13aenJ6kwHo9d1w2C4FtJ7oDmmIal8v1iNKYbjUaJ/WIYhvv9/vn52XEcIYTneZ7nCSEcx3Fdd7/f55anakcXMUHvyvF49H1/uVwOBgPbtm3bHgwGy+XS9/3j8aivzXKOLmJiRleCIPB9P/qPi+/76mhW0QhHFzGpYVeydoTRQYoIS60ak/tcQhGRYW8ICnSRoEAXCQo1d5EbRIMwo1WFMgZJ6KJBoLeqRMYgCV00CPRWlcgYJKGLBgHdqmTGQCUrYxBDEc0CultxxiAVNWNw4ks6fFUHE+iWxBmDVLIyBjEW0wVGYUbGIMvF1IxBhGoeXQTHjIxB1ozWZAzoonEYkzFQ0WQMKKKJ1C1jEKGqTxfxqXPGIDaSIhoBepN+kjGI4F9wTMGMJpXIGIT/W0gj8alne/QxA4JJ3XrDmIG5sDEEBbpIUKCLBIWau1jR7pCbziowY00rzRiUeLsseZCvop0L9LW7esbgFBfP+ON+M+hrd/WMAV28GNBrJ6vPGOROZ804Tv1A+d/21wO9dggZA94XLwb02iFkDNSqbyrTxXPBjMHXqay7ZpaL8XG6eC6YMUg5pdEruUfkfvG8MGOQcpYuXgVmDFLO5m4HuV+sAmYMQvUDuXoVkpWcCPqSXSZjUOjZJaSL1WDGklWdMSh9X8wqpIslqOeSZZlXSBHNfNc4V/pBjdRtyXI9KKFj1nEKd164mgQFukhQoIsEBbpIUKCLBAW6SFCgiwQFukhQ+AcnNqhhppuiTAAAAABJRU5ErkJggg==" alt="" />

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <ul>

            <li><input type="radio" name="g" value="11" />男</li>

            <li><input type="radio" name="g" value="22" />女</li>

            <li><input type="radio" name="g" value="33" />女司机</li>

        </ul>

        <!--radio = document.getElementsByTagName('input')

        [<input type="radio" name="g" value="11">, <input type="radio" name="g" value="11">, <input type="radio" name="g" value="11">]

        radio[1]

        <input type="radio" name="g" value="11">

        xo = radio[1]

        <input type="radio" name="g" value="11">

        xo.value

        "11"

        xo.checked

        false

        xo.checked = true

        true-->

    </body>

</html>

代码及讲解

案例三：克隆

aaarticlea/png;base64,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" alt="" />

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <h2 id="h1">333

            <span>123</span>

            <a>123</a>

        </h2>

        <div id="container">

            <div class="item">1    </div>

            <div class="item">2</div>

        </div>

        <script>

            var h = document.getElementById('h1');

            var c = document.getElementById('container')

            //c.appendChild(h);//直接添加到2下面了

//            var newH = h.cloneNode(true);//不加true,只克隆格式

//            c.appendChild(newH);加true后完整克隆到2下面了

        </script>

    </body>

</html>

代码及注释

案例四：自定义属性，获取自定义属性并改变标签内容

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGsAAADWCAIAAABZievwAAAEY0lEQVR4nO3a3YrbRgBH8Xn/ayP5G9sQ75K+il/BbUlKElLa0pb2dnthEEKakcY+laJY50cwtneyrA774Wz+4Scx4f37H/xD/oQ3MRakLEhZkLIgZUHKgpQFqWTB6/X6+vr6bsJeXl6u1+uYsaKSBc/n87+Tdz6fx4wVlSx4Op3+mbzT6TRmrKhkwePx+PfkHY/HMWNFJQseDoe/8oQQeg/czvSevNfhcBgzVlRXwT/zhJb2m6qHjTvtY6n7UZMuuN/v/8gTQsg8UD/Zvt++7X3n+/1+zFhRXQV/zxNCyDyQOnl7vnFb6XjPky642+1+S2t/5VZyzrRP1m8bDzs+jN1uN2asqGTB7Xb7a1oIIf/56snuv1XdNh52fBjb7XbMWFHJgpvN5mtaCCH/+erJ9p36w8Zt/WHKZrMZM1ZUsuB6vf6SFkLIf/6Wo3pr+0z7rfUv9o4PY71ejxkrKllwtVp9Tuv47hY9WX/Y8d6qA9Wx6PnKarUaM1ZUsuByufzE3KLc7jSeqT9Z3a9u229KWS6XY8aKShYsy/KXtBBCdRu903s4erL9fOrYTVmWY8aKShYsiuJjQgihfb99p3rYeCb1ZPSdp47dFEUxZqyoroIfJm/SBReLxc+Tt1gsxowV1VXwWy9S+k26YFEUP07epL+KL5dLWZaLCSuK4nK5jBkryv+royxIWZCyIJVVMITmsfqvEnKef2I915nKFH3YfexZPfI5aMG6/7Ng9996Vg9+H+x960zyvfGCqR8y6IP6rqCCd5V9Vo8X7G00k4iPvx7sPWbB2iFfzaTlvqKu/3wILdHzA37UUzKX6xyOBSkLUhakLEhZkLIgdcfrwdSB6OH5vCS849dWvb+GmUmyBgtSd1xzNKgFc68557cJc/sOeNN/qdEiqYLR+8/tkc/BzFIzifjI98H2q5ZoLAtm/ca04/PRgqjgTPK9kX+TRL+K/Vmsu1mQsiBlQcqClAUpC1LuqCl31JTLI8odNeWOmnJHTbmjptxRU+6oKV/NUO6oqblc53AsSFmQsiBlQcqClAUpd9SUK2DKgpQ7asodNeWOmnJHTbmjptxRU+6oKXfU1IwudSAWpCxIWZCyIGVByoKUO2rKHTXl8ohyR025o6bcUVPuqCl31JQ7aspXM5Q7amou1zkcC1IWpCxIWZCyIGVByh015QqYsiDljppyR025o6bcUVPuqCl31JQ7asodNTWjSx2IBSkLUhakLEhZkLIg5Y6ackdNuTyi3FFT7qgpd9SUO2rKHTXljpry1Qzljpqay3UOx4KUBSkLUhakLEhZkHJHTbkCpixIuaOm3FFT7qgpd9SUO2rKHTXljppyR03N6FIHYkHKgpQFKQtSFqQsSLmjptxRUy6PKHfUlDtqyh015Y6ackdNuaOmfDVDuaOm5nKdw7EgZUHKgpQFKQtSFqTcUVOugCkLUu6oKXfUlDtqyh015Y6ackdNuaOm3FFTM7rUgViQsiBlQcqClAWp/wDb8JdTyzd9iAAAAABJRU5ErkJggg==" alt="" />aaarticlea/png;base64,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" alt="" />

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        //可以构造出一种选择器

        <input type="button" onclick="Func()" value="点我啊" />

        <div id='i1'>

            <div class="c1">123</div>

            <div class="c1" alex='sb'>123</div>

            <div class="c1" alex='sb'>123</div>

            <div class="c1" alex='sb'>123</div>

            <div class="c1">123</div>

            <div class="c1" alex='sb'>123</div>

            <div class="c1">123</div>

            <div class="c1" alex='sb'>123</div>

            <div class="c1">123</div>

        </div>

        <script>

        function Func(){

            //i1所有孩子，循环每一个孩子，判断如果alex='sb'

            var i1 = document.getElementById('i1')

            var divs = i1.children

            for ( var i =0; i<divs.length;i++){

                var current_div = divs[i];

                var result = current_div.getAttribute('alex')//得到属性

                //console.log(result);

                if (result == 'sb'){

                    current_div.innerText = '456';

                }

            }

        }

        </script>

    </body>

</html>

案例代码

案例五：获取输入框内的值三种方法

aaarticlea/png;base64,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" alt="" />

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

</head>

<body>

    <div id="inp">

    </div>

    <input type="text"  class="aa"/>

    <input type="button" value="添加" onclick="Func();" />

    </div>

    <div id="lis">

        <ul>

            <li>红烧肉</li>

            <li>红烧肘子</li>

            <li>红烧鱼</li>

        </ul>

    </div>

    <script>

        var inp_aa = document.getElementsByClassName('aa');

        inp_aa[0].value = '红烧带鱼';//相当于在输入框输入内容

    </script>

</body>

</html>

方法一：类方法

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

</head>

<body>

    <div id="inp">

    </div>

    <input type="text"  class="aa"/>

    <input type="button" value="添加" onclick="Func();" />

    </div>

    <div id="lis">

        <ul>

            <li>红烧肉</li>

            <li>红烧肘子</li>

            <li>红烧鱼</li>

        </ul>

    </div>

    <script>

        var c = document.querySelector('.aa');//查询选择器  .是区别id，标签的语法

        c.value = '红烧茄子';

    </script>

</body>

</html>

方法二：查询

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

</head>

<body>

    <div id="inp">

    </div>

    <input type="text"  id="aa"/>

    <input type="button" value="添加" onclick="Func();" />

    </div>

    <div id="lis">

        <ul>

            <li>红烧肉</li>

            <li>红烧肘子</li>

            <li>红烧鱼</li>

        </ul>

    </div>

    <script>

        var c = document.getElementById('aa');

        c.value = '红烧茄子';

    </script>

</body>

</html>

方法三：id

案例六：

aaarticlea/png;base64,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" alt="" />

//'beforeBegin'、'afterBegin'\ 'beforeEnd'\'afterEnd'

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8" />

    </head>

    <body>

        <div id="inp">

        </div>

        <input type="text" />

        <input type="button" value="添加" onclick="addElen(this)" />

        </div>

        <div>

            <ul id="lis">

                <li>红烧肉</li>

                <li>红烧肘子</li>

                <li>红烧鱼</li>

            </ul>

        </div>

        <script>

                    function addElen(ths) {

                        var aaa = ths.previousElementSibling.value;

            //            alert(aaa)

                        var list_li = document.getElementById("lis");

            //            alert(list_li)

                        var bbb = "<li>" +aaa+ "</li>";

            //            alert(bbb)

                        list_li.insertAdjacentHTML("beforeEnd", bbb)

                    }

        </script>

    </body>

</html>

方法一：字符串

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8" />

    </head>

    <body>

        <div id="inp">

        </div>

        <input type="text" />

        <input type="button" value="添加" onclick="addElen(this)" />

        </div>

        <div>

            <ul id="lis">

                <li>红烧肉</li>

                <li>红烧肘子</li>

                <li>红烧鱼</li>

            </ul>

        </div>

        <script>

            function addElen(ths){

                var aaa = ths.previousElementSibling.value; //获取input的值

                var list_li = document.getElementById("lis"); //获取ul

                var tag = document.createElement('li');//创建li

                tag.innerText = aaa; //赋予tag也就是新的li标签里面的值是输入的input的值

                list_li.insertBefore(tag, list_li.children[-1])//根据索引插入需要位置的值

            }

        </script>

    </body>

</html>

方法二：利用方法标签

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div>

            <input type="text" />

            <input type="button" value="添加" onclick="AddElement(this)" />

        </div>

        <div>

            <ul id="commentList">

                <li>alex</li>

                <li>eric</li>

            </ul>

        </div>

        <script>

            function AddElement(ths){

                //获取输入的值

                var val = ths.previousElementSibling.value;

                var commentList = document.getElementById('commentList')

                //第一种形式

                var str = "<li>" + val + "</li>"

                //'beforeBegin'、'afterBegin'\ 'beforeEnd'\'afterEnd'

                //beforeEnd 内部最后

                //beforeBegin 外部上边

                //afterBegin 内部贴身

                //afterEnd 外部贴身

//                commentList.insertAdjacentHTML("beforeEnd", str)

                //第二种方式，元素的方式

                var tag = document.createElement('li');

                tag.innerText = val;

                var temp = document.createElement('a');

                temp.innerText = '百度';

                temp.href = "http://www.baidu.com";

                tag.appendChild(temp);

                commentList.insertBefore(tag,commentList.children[1]);

                console.log(commentList.children[1])

            }

        </script>

    </body>

</html>

方法三：添加的li里面嵌套a标签

案例七：

aaarticlea/png;base64,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" alt="" />aaarticlea/png;base64,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" alt="" />

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            input{

                height: 40px;

            }

            .gg{

                color: gray;

            }

            .bb{

                color: black;

            }

        </style>

    </head>

    <body>

        <p>当鼠标进入是，移除内容</p>

        <p>当输入表退出时，添加内容</p>

        <input type="text"  class="gg" value="请输入内容" onfocus="Focus(this)" onblur="Blur(this)" />

        <script>

            function Focus(ths){

                //查找的第一种方式

                //document。。

                //第二种方式this

                //ths

                //ths.className = 'bb'

                var current_val = ths.value;

                if (current_val == "请输入内容"){

                    ths.value = "";

                    ths.className = 'bb';

                }

            }

            function Blur(ths) {

                var current_val = ths.value;

                if (current_val == "请输入内容" || current_val.trim().length == 0 ){

                    ths.value = '请输入内容';

                    ths.className = 'gg';

                }

            }

        </script>

    </body>

</html>

案例代码

案例八：头部菜单

aaarticlea/png;base64,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" alt="" />

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8" />

        <style>

            .pg_top .menu {

                background-color: gold;

                width: 400px;

                height: auto;

                position: absolute;

                left: 200px;

            }

            .item {

                float: left;

                margin: 10px 0;

                padding: 0 20px;

                font-size: 25px;

            }

            .content {

                position: absolute;

                left: 200px;

                top: 58px;

                background-color: burlywood;

                width: 400px;

                height: 200px;

            }

            .hide {

                display: none;

            }

            .bk {

                background-color: greenyellow;

            }

        </style>

    </head>

    <body>

        <div class="pg_top">

            <div class="menu">

                <div class="item" con="h1" onclick="Show(this)">十八里店</div>

                <div class="item" con="h2" onclick="Show(this)">簋街</div>

                <div class="item" con="h3" onclick="Show(this)">后海</div>

            </div>

            <div id="content" class="content">

                <div con="h1">烤全羊</div>

                <div class="hide" con="h2">麻辣龙虾</div>

                <div class="hide" con="h3">相约酒吧</div>

            </div>

        </div>

        <script>

            function Show(ths) {

                //当我点这个标签的时候,其他标签的背景色变没

                var baba = ths.parentElement.children; //获取到了每个子元素

                var target = ths.getAttribute('con');

                for (i = 0; i < baba.length; i++) {

                    if (ths == baba[i]) { //做判断，

                        ths.classList.add('bk') //添加属性

                    } else {

                        baba[i].classList.remove('bk') //删除属性

                    }

                }

                //内容

                var current_con = document.getElementById('content').children;

                console.log(current_con)

                for (j=0; j<current_con.length;j++) {

                    var s_att = current_con[j].getAttribute('con')

                    if (target == s_att ) {

                        current_con[j].classList.remove('hide');

                    }else{

                        current_con[j].className = 'hide';

                    }

                }

            }

        </script>

    </body>

</html>

自己写的稀烂代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

        ul{

            list-style: none;

            padding: 0;

            margin: 0;

        }

        ul li{

            float: left;

            background-color: #2459a2;

            color: white;

            padding: 8px 10px;

        }

        .clearfix:after{

            display: block;

            value:'111';

            content: '.';

            height: 0;

            /*visibility: hidden;*/

            clear: both;

        }

                .hide{

            display: none;

        }

                .tab-menu .title{

            background-color: #dddddd;

        }

                .tab-menu .title .active{

            background-color: white;

            color: black;

        }

                .tab-menu .content{

            border: 1px solid #dddddd;

            min-height: 150px;

        }

    </style>

    </head>

    <body>

        <div style="width:400px; margin: 0 auto;">

            <div class="tab-menu">

                <div class="title clearfix">

                    <ul>

                        <li target='h1' class="active" onclick="Show(this)">十八里店</li>

                        <li target='h2'  onclick="Show(this)">簋街</li>

                        <li target='h3'  onclick="Show(this)">十刹海</li>

                    </ul>

                </div>

                <div class="content" id="content">

                    <div con="h1">烤羊腿</div>

                    <div con="h3" <!--class="hide"-->>油焖小龙虾</div>

                    <div con="h2" <!--class="hide"-->>香甜鸡尾酒</div>

                </div>

            </div>

        </div>

        <script>

            function Show(ths){

                //ths表示当前标签

                var target = ths.getAttribute('target')//h3

                //给自己添加样式active

                //兄弟们去掉

                ths.className = 'active';

                var brothers = ths.parentElement.children;

                for(var i=0;i<brothers.length;i++){

                    if ( ths == brothers[i]){

                    }else{

                        brothers[i].removeAttribute('class')

                    }

                }

                //操作内容

                var contents = document.getElementById('content').children;

                console.log(contents)

                for (var j=0;j<contents.length;j++){

                    var current_content = contents[j];

                    console.log(current_content)

                    var con = current_content.getAttribute('con')

                    if (con == target){

                        current_content.classList.remove('hide');

                    }else{

                        current_content.className="hide";

                    }

                }

            }

        </script>

    </body>

</html>

稍好点的代码

案例九：返回顶部

主要知识点：onscroll 和document.body.scrollTop;

aaarticlea/png;base64,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" alt="" />

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .go-top{

                position: fixed;

                right: 20px;

                bottom: 19px;

                width: 40px;

                height: 40px;

                background-color: darkgoldenrod;

                color: white;

            }

            .hide{

                display: none;

            }

        </style>

    </head>

    <body onscroll="Func();">

        <div id="i1" style="height: 2000px; background-color: greenyellow;">

            <h1>asdfafdasdf</h1>

        </div>

        <div id="i2" class="go-top hide">

            <a href="javascript:void(0)" onclick="goTop();">返回顶部</a>

        </div>

        <script>

            function Func(){

                var scrollTop = document.body.scrollTop;//body的滚动高度

                var ii = document.getElementById('i2');

                if(scrollTop>100){

                    ii.classList.remove('hide');//移除就是显示

                }else{

                    ii.classList.add('hide');

                }

            }

            function goTop(){

                document.body.scrollTop=0;

            }

        </script>

    </body>

</html>

案例讲解

案例十：

主要知识点：

             //scroll 滚动；卷轴的意思

//            scrollTop: 滚动条距离顶部高度

//            scrollHeight: 文档高度:自身+padding

//            clientTop: 边框高度

//            clientHeight: 当前范围可视的高度:自身 + padding

            //offset  印刷的意思

//            offsetTop: 当前标签距离"顶部"的高度(body)

//                        如果他的上一级没有postion,如果有则按照position的标签为主

//            offsettHeight: 自身范围的高度:自身+padding+border

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div style="height: 20px;background-color: green;"></div><!--头部-->

        <div style="border: 5px solid pink;padding: 10px;"><!--body-->

            <div>

                <div id="xo" style="height: 200px;overflow: auto;width: 400px;margin: 0 auto;border: 15px solid red;padding: 3px;" >

                    <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>

                    <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>

                    <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>

                    <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>

                    <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>

                    <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>

                    <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div>

                    <div>sdf</div><div>sdf</div>

                </div>

            </div>

        </div>

        <script>

            var ii = document.getElementById('xo')

            console.log(ii.scrollTop)

            console.log(ii.scrollHeight)

            console.log(ii.clientTop)

            console.log(ii.clientHeight)

            console.log(ii.offsetTop)

            console.log(ii.offsetHeight)

            //scroll 滚动；卷轴的意思

//            scrollTop: 滚动条距离顶部高度

//            scrollHeight: 文档高度:自身+padding

//            clientTop: 边框高度

//            clientHeight: 可见范围的高度:自身 + padding

            //offset  印刷的意思

//            offsetTop: 当前标签距离"顶部"的高度(body)

//                        如果他的上一级没有postion,如果有则按照position的标签为主

//            offsettHeight: 可见范围的高度:自身+padding+border

        </script>

    </body>

</html>