jQuery尺寸.位置操作

jQuery尺寸

width( ) / height( )

獲取元素的寬度和高度, 只算width / height

innerWidth( ) / innerHeight( )

獲取元素的寬度和高度, 包含padding

outerWidth( ) / outerHeight( )

獲取元素的寬度和高度 包含padding,border

outerWidth( true ) / outerHeight( true )

獲取元素的寬度和高度, 包含padding, border, margin

案例

  <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 10px;
            margin: 20px;
        }
    </style>
</head>
--------------------------------------
    <div class="box"></div>
--------------------------------------
    <script>
        
        console.log($('.box').width()); //300
        console.log($('.box').innerWidth()); //320
        console.log($('.box').outerWidth()); //360
        console.log($('.box').outerWidth(true)); //400
    </script>
</body>

上面的這些方法
注意點
不添加參數的時候 是獲取相應的值,返回的是數字型
如果添加參數, 是修改相應的值
參數可以不帶單位

jQuery位置

offset( )

跟定位沒有關係

//不加參數就是獲取
 console.log($('.box2').offset().top);
 //加參數就是設置
 console.log($('.box2').offset({
            top: 200,
            left: 300
        }));

獲取距離文檔的位置(偏移),加參數就是修改值(偏移量)

position( )

這個方法只能獲取不能設置

獲取與帶有定位的父級的偏移量 如果父級沒有定位,就以文檔爲準

scrollTop/scrollLeft( )

獲取元素被捲去的頭部和左側 (加參數就是設置)