描述:
jquery宽高的设置
实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
{
width: 100px;
height: 100px;
background-color: deepskyblue;
border: 2px solid #000000;
padding: 10px;
margin: 20px;
}
.div1
{
margin: 0;
padding: 0;
border: none;
position: relative;
left:50px;
top:50px;
}
.div2
{
width: 50px;
height: 50px;
background-color: crimson;
margin: 0;
padding: 0;
border: none;
position: absolute;
left:20px;
top:20px
}
</style>
<script src="node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div class="div1">
<div class="div2"></div>
</div>
<script>
// $("div").width(100).height("100px");
// console.log($("div").width());//获取宽度
/*$("div").width(function (index) {
return (index+1)*50
})*/
/*$("div").width(50)
.height(50)
.css("backgroundColor","red")*/
// console.log($("div").innerWidth());//width+padding
// $("div").innerWidth(100);//设置的值会减去padding值然后赋值给width
// console.log($("div").outerWidth());//width+padding+border
// $("div").outerWidth(100);//值-padding-border,然后赋值给width
// console.log($("div").outerWidth(true));//width+padding+border+margin
// 只能获取
// var rect=div.getBoundingClientRect();
// 获取相对页面的绝对定位
// console.log($(".div2").offset());//getBoundingClientRect()一样
// $(".div2").offset({left:0,top:0});//可以设置,必须写对象,而且必须是left和top
// console.log($(".div2").position());//相对父容器定位位置
// $(".div2").position({left:0,top:0});//错误的,不可以设置的
// console.log($(".div2").position().left);//div2.offsetLeft
// console.log($(document).scrollTop());//获取当前滚动条的位置
// $(document).scrollTop(100);// 设置滚动条位置
</script>
</body>
</html>