js的offset家族属性

待我称王封你为后i 2022-07-13 23:26 222阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                padding: 10px;
                margin: 100px;
                background-color: pink;
                border: 10px solid #000;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        <script>
    //-------------------offsetWidth和offsetHeight-------------------
                var div = document.getElementsByTagName("div")[0];
    
                //offsetHeight和offsetWidth: 可以检测盒子的宽高。
                //包括宽高本身，padding，border。不包括margin
    
                //offsetHeight = height+padding+border;(不加margin)
                //offsetWidth = width+padding+border;(不加margin)
    
                console.log(div.offsetHeight);
                console.log(typeof div.offsetHeight);   //number
    
    
    
    //------------------offsetLeft和offsetTop-----------------------
    //        	offsetLeft和style.left区别
    //
    //        一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。
    //        而 style.left不可以
    //        二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
    //        三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
    //        四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
    //
    //        style.left在=的左边和右边还不一样。（左边的时候是属性，右边的时候是值）
    
    
               //方便理解
            //最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。
            //如果父系盒子中都没有定位，以body为准。
            //style.left只能获取行内式，如果没有返回“”;
    
            //    二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
            //div.offsetLeft = 100;    div.style.left = "100px";
    
            //    三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
            //style.left和style.top可以赋值
            //offsetLeft和offsetTop只能获取值
    
            //    四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
            //style.left只能获取行内式，如果没有返回“”;
    
    
        </script>
    </body>
    </html>