jq：尺寸、位置（尺寸&位置）

阿新 • • 發佈：2020-08-03

1、尺寸操作

（1）width

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
         <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
        <style>
            div {
                width: 200px;
                height: 300px;
                background 
-color: red;
                padding: 10px;
                border: 10px solid black;
                margin: 12px;
            }
        </style>
    </head>

    <body>
    <div></div>
        <script>
            $(function() {
                $("div").width(300);
                console.log($( 
"div").width());
            })
        </script>
    </body>

</html>

（2）包含padding

<body>
    <div></div>
        <script>
            $(function() {
                $("div").width(300);
                console.log($("div").innerWidth());
            })
         
</script>
    </body>

(3)包含padding、border

<body>
    <div></div>
        <script>
            $(function() {
                $("div").width(300);
                console.log($("div").outerWidth());
            })
        </script>
    </body>

（4）包含padding、border、margin

<div></div>
        <script>
            $(function() {
                $("div").width(300);
                console.log($("div").outerWidth(true));
            })
        </script>
    </body>

2、位置

（1）獲取位置

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
         <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
        <style>
             .test{
                height: 100px;
                width: 200px;
                background-color: black;
                position: relative;
                top:100px;
                left: 200px;
            }
            .big{
                height: 400px;
                width: 400px;
                background-color: #ffffcc;
                margin: 0 auto;
                position: absolute;
                top: 100px;
                left: 100px;
            }
        </style>
    </head>

    <body>
    <div class="big">
        <div class="test"></div>
    </div>
        <script>
            $(function() {
                console.log($(".test").offset());
            })
        </script>
    </body>

</html>

獲取到的是距離文件的位置而不是舉例父元素的位置

（2）修改位置

<body>
    <div class="big">
        <div class="test"></div>
    </div>
        <script>
            $(function() {
                $(".test").offset({
                    top:110,
                    left:200
                })
            })
        </script>
    </body>

（3）獲取距離帶有定位的父級元素的偏移量，沒有帶有定位的父級元素則以文件為主

<body>
    <div class="big">
        <div class="test"></div>
    </div>
        <script>
            $(function() {
                console.log($(".test").position());
            })
        </script>
    </body>