offset

作者: 洛洛kkkkkk | 来源:发表于2017-04-18 19:48 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .redDiv{
                    width: 500px;
                    height: 500px;
                    background-color: red;
                    border: 50px solid;
                    /*position: relative;*/
                }
                .blueDiv{
                    width: 200px;
                    height: 200px;
                    background-color: blue;
                    /*margin-left: 10px;*/
                    /*position: absolute;
                    left: 10px;*/
                    /*float: left;*/
                    display: inline-block;
                    border: 1px solid royalblue;
                    /*padding: 50px;*/
                    /*background-clip: content-box;*/
                }
                .yellowDiv{
                    width: 100px;
                    height: 100px;
                    background-color: yellow;
                    /*position: absolute;
                    left: 250px;*/
                    /*float: left;*/
                    display: inline-block;
                }
            </style>
        </head>
        <body>
            <div class="redDiv">
                <div class="blueDiv"></div>
                <div class="yellowDiv"></div>
            </div>
        </body>
        <script type="text/javascript">
            var redDiv=document.querySelector(".redDiv");
            var blueDiv=document.querySelector(".blueDiv");
            var yellowDiv=document.querySelector(".yellowDiv");
            //offsetLeft是自身的左边距离定位父级的左边的距离。
            //如果没有定位父级,则以窗口左边为准。
            console.log(blueDiv.offsetLeft);
            //client是自身边框的宽度
            console.log(blueDiv.clientLeft);
            console.log(yellowDiv.offsetLeft);
            
            console.log(redDiv.offsetWidth);
            console.log(redDiv.clientWidth);
        </script>
    </html>
    

    相关文章

      网友评论

          本文标题:offset

          本文链接:https://www.haomeiwen.com/subject/uveqzttx.html