client、offset、scroll

時間 2019-11-11

標籤 client offset scroll 简体版

原文原文鏈接

client

clientTop 內容區域到邊框頂部的距離 == 邊框的高度
clientLeft 內容區域到邊框左部的距離 == 邊框的寬度
clientWidth 內容區域+左右padding == 可視寬度
clientHeight 內容區域+ 上下padding == 可視高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 200px;
                height: 200px;
                position: absolute;
                border: 10px solid red;
                /*margin: 10px 0px 0px 0px;*/
                padding: 80px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            clientTop 內容區域到邊框頂部的距離 == 邊框的高度,clientLeft 內容區域到邊框左部的距離 == 邊框的寬度,clientWidth 內容區域+左右padding == 可視寬度,clientHeight 內容區域+ 上下padding == 可視高度;clientTop 內容區域到邊框頂部的距離 == 邊框的高度,clientLeft 內容區域到邊框左部的距離 == 邊框的寬度,clientWidth 內容區域+左右padding == 可視寬度,clientHeight 內容區域+ 上下padding == 可視高度;
        </div>
    </body>
    <script type="text/javascript">
        var oBox = document.getElementsByClassName('box')[0];
        console.log(oBox.clientTop);
        console.log(oBox.clientLeft);
        console.log(oBox.clientWidth);
        console.log(oBox.clientHeight);
    </script>

</html>

屏幕的可視區域

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">

        // 屏幕的可視區域
        window.onload = function(){

            // document.documentElement 獲取的是html標籤
            console.log(document.documentElement.clientWidth);
            console.log(document.documentElement.clientHeight);
            // 窗口大小發生變化時，會調用此方法
            window.onresize = function(){    
                console.log(document.documentElement.clientWidth);
                console.log(document.documentElement.clientHeight);
            }         
        }
    </script>
</html>

offset

offsetTop:  
    若是盒子沒有設置定位 == 到body的頂部的距離,
    若是盒子設置定位 == 以父輩爲基準的top值

offsetLeft： 
    若是盒子沒有設置定位 == 到body的左部的距離
    若是盒子設置定位 == 以父輩爲基準的left值

offsetWidth：佔位寬 == 內容+padding+border

offsetHeight：佔位高

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

    </head>
    <body style="height: 2000px">
        <div>
            <div class="wrap" style=" width: 300px;height: 300px;background-color: green">
                <div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;">            
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById('box')

            console.log(box.offsetTop)
            console.log(box.offsetLeft)
            console.log(box.offsetWidth)
            console.log(box.offsetHeight)
        }

    </script>
</html>

scroll

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
        </style>
    </head>
    <body style="width: 2000px;height: 2000px;">
        <div style="height: 200px;background-color: red;"></div>
        <div style="height: 200px;background-color: green;"></div>
        <div style="height: 200px;background-color: yellow;"></div>
        <div style="height: 200px;background-color: blue;"></div>
        <div style="height: 200px;background-color: gray;"></div>
        <div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
            <p>
                clientTop 內容區域到邊框頂部的距離 == 邊框的高度,clientLeft 內容區域到邊框左部的距離 == 邊框的寬度,clientWidth 內容區域+左右padding == 可視寬度,clientHeight 內容區域+ 上下padding == 可視高度;clientTop 內容區域到邊框頂部的距離 == 邊框的高度,clientLeft 內容區域到邊框左部的距離 == 邊框的寬度,clientWidth 內容區域+左右padding == 可視寬度,clientHeight 內容區域+ 上下padding == 可視高度;
            </p>

        </div>


    </body>
    <script type="text/javascript">

        window.onload = function(){

            //實施監聽滾動事件
            window.onscroll = function(){
//                console.log(1111)
//                console.log('上'+document.documentElement.scrollTop)
//                console.log('左'+document.documentElement.scrollLeft)
//                console.log('寬'+document.documentElement.scrollWidth)
//                console.log('高'+document.documentElement.scrollHeight)


            }

            var s = document.getElementById('scroll');

            s.onscroll = function(){
//            scrollHeight : 內容的高度+padding  不包含邊框
                console.log('上'+s.scrollTop)
                console.log('左'+s.scrollLeft)
                console.log('寬'+s.scrollWidth)
                console.log('高'+s.scrollHeight)
            }
        }

    </script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。