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