jQuery学习笔记10-尺寸和位置设置

àì夳堔傛蜴生んèń 2024-04-17 17:03 88阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery尺寸和位置</title>
        <style>
            .father{
                width: 200px;
                height: 200px;
                background: red;
                /*设置50px的黑色边框*/
                border: 50px solid black;
                /*设置距离浏览器左边窗口50px*/
                margin-left: 50px;
                /*生成相对定位元素*/
                position: relative;
            }
            .son{
                width: 100px;
                height: 100px;
                background: blue;
                /*生成绝对定位元素*/
                position: absolute;
                left: 50px;
                top: 50px;
            }
        </style>
        <script src="jQuery/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                var btns = document.getElementsByTagName("button");
                btns[0].onclick = function () {
                    //获取标签的宽度
                    console.log($(".father").width());
                //    获取距离窗口的偏移位
                    console.log($(".son").offset().left);
                //    获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离
                    console.log($(".son").position().left);
                };
    
                btns[1].onclick = function () {
                    //设置标签的宽度
                    console.log($(".son").width("200px"));
                //    设置标签距离窗口的偏移量
                    $(".son").offset({
                        left:10
                    })
                //    设置距离他最近的相对位置的距离，注意position不能设置
                    $(".son").css({
                        left:10
                    })
    
                }
            })
    
        </script>
    </head>
    <body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置</button>
    </body>
    </html>