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( )

获取元素被卷去的头部和左侧 (加参数就是设置)