1.尺寸
width() | height() 获取宽高,只算width | height
先准备一个盒子:
<div></div>
<style>
div {
width: 200px;
height: 200px;
padding: 10px;
border: 2px solid pink;
margin: 5px;
}
</style>
获取宽高:
<script>
$(function () {
console.log($('div').width());
console.log($('div').height());
})
</script>
可以看到,结果就是盒子的宽度和高度,不包含其他。
可以设置宽高: (console.log之前添加下面的代码:)
$('div').width(300);
innerWidth() | innerHeight() 包含padding
$(function () {
console.log($('div').innerWidth());
console.log($('div').innerHeight());
})
可以看到,结果宽=200+10+10 = 220px 包含了padding值,设置方法与上面相同
outerWidth() | outerHeight() 包含padding 和 border
$(function () {
console.log($('div').outerWidth());
console.log($('div').outerHeight());
})
可以看到此时的结果=200+10+10+2+2=224 包含了padding和border
outerWidth(true) | outerHeight(true) 包含padding ,border,margin
$(function () {
console.log($('div').outerWidth(true));
console.log($('div').outerHeight(true));
})
结果=200+10+10+2+2+5+5=234 包含padding border margin
2.位置
offset() 设置或获取元素偏移
相对于文档的偏移坐标,跟父级没有关系
先准备两个盒子:
<div class="big">
<div class="small"></div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.big {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
margin-left: 20px;
}
.small {
position: absolute;
top: 20px;
left: 20px;
width: 50px;
height: 50px;
background-color: blue;
}
</style>
使用offset查询小盒子的位置:
<script>
$(function () {
console.log($('.small').offset());
})
</script>
返回的是一个对象{top: 200px,left:40px} =>left 值是40=20+大盒子的margin-left
返回值是相对于整个页面,并不是相对于父盒子,与父盒子无关
可以offset().top获取顶部距离,offset().left获取左侧距离
$(function () {
console.log($('.small').offset().top);
console.log($('.small').offset().left);
})
设置:offset({top:50,left:50})
$(function () {
$('.small').offset({ top: 30, left: 10 });
console.log($('.small').offset().top);
console.log($('.small').offset().left);
})
position() 相对于带有定位的父级偏移,若无定位,则以文档
还是同样两个盒子,我们获取他的position:
$(function () {
console.log($('.small').position());
})
可以看到,这次的位置都是相对于父盒子的。
注意:此方法只能获取,不能设置。
scrollTop() | scrollLeft() 被卷去的头部和左部
(把之前例子的小盒子去掉,大盒子改大)(当页面滚动时,打印被卷去的头部)
<div class="big"></div>
<style>
* {
padding: 0;
margin: 0;
}
.big {
width: 1200px;
height: 800px;
background-color: pink;
margin: 0 auto;
}
</style>
<script>
$(function () {
$(window).scroll(function () {
console.log($(document).scrollTop())
})
})
</script>
注意:此方法可以获取和设置。