jquery中css的操作

1.布局

<div id="box"></div>
<div class="list">
    <div class="block"></div>
</div>

2.书写样式

<style>
        body{
            position: relative;
        }
        .list{
            width: 200px;
            height: 200px;
            overflow: scroll;
            border: 5px solid #000;
            padding: 10px;
            margin: 10px;
        }
        .block{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
    </style>

3.关于css的操作

    css()  获取或设置元素的css
    
    jquery  里面可以进行链式操作  连点
    
    $("#box").css("width","200px").css("height","200px").css("border","1px solid #000

 $("#box").css({
        width:"100px",
        height:"100px",
        border:"1px solid #000",
        backgroundColor:"red"
    });

    console.log($("#box").css("border"));

offset 相对适口的偏移

 console.log($("#box").offset());

position 相对父元素的偏移
父元素 相对定位

console.log($("#box").position());

scrollTop 获取或设置元素的上滑距

    console.log($(".list").scrollTop());
    $(".list").scrollTop(100);

    console.log($(".list").scrollLeft());
    $(".list").scrollLeft(100);

width() 设置或获取

	$(".list").width(300);
    console.log($(".list").width());
    //$(".list").height(300);
    console.log($(".list").height());

    console.log($(".list").innerHeight());
    console.log($(".list").innerWidth());

    console.log($(".list").outerWidth(true));
    console.log($(".list").outerHeight());