jQuery尺寸:
语法 | 用法 |
---|---|
width() / height() | 获得匹配元素的宽度和高度,只计算width / height |
innerWidth() / innerHeight() | 获得匹配元素的宽度和高度,包含padding值 |
outerWidth() / outerHeight() | 获得匹配元素的宽度和高度,包含padding和border |
outerWidth(true) / outerHeight(true) | 获得匹配元素的宽度和高度,包含padding、border和margin |
<style>
.box {
width: 100px;
height: 100px;
background-color: chartreuse;
padding: 20px;
margin: 20px;
border: cornflowerblue 10px solid;
}
</style>
<body>
<div class="box"></div>
<script>
$(function(){
// 只单纯返回width和height 100
console.log($(".box").width());
// 包含padding值 140
console.log($(".box").innerWidth());
// 包含padding和border值 160
console.log($(".box").outerWidth());
// 包含padding、border和margin值 200
console.log($(".box").outerWidth(true));
})
</script>
</body>
以上jQuery方法的参数如果为空,则是获取相对应的值,如果参数里写上了数值,则是修改对应的值。
jQuery位置:
位置主要有三个:offset()、position()、scrollTop()/scrollLeft()
1.offset() 设置或获取元素相对于文档的偏移坐标,和父级没有关系
该方法有两个属性left、top,offset().top获取文档距离文档顶部的距离,offset().left获取文档距离文档左侧的距离。
<script>
$(function(){
// 获取对应元素的偏移
console.log($(".son").offset().top);
// 设置对应元素的偏移
$(".son").offset({
top:100,
left:100
})
})
</script>
2.position()用于返回元素相对于带有定位的父级偏移坐标,如果父级没有定位,则以文档为准。
position()方法只能获取偏移坐标,不能像offset()一样设置。
<script>
$(function(){
console.log($(".son").position().left);
})
</script>
3.scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
<script>
$(function(){
// 当页面滚动时触发
$(window).scroll(function(){
// 如果文档被卷去的头部>=了150 让son元素显示,反之隐藏
if($(document).scrollTop() >= 150){
$(".son").show();
}else {
$(".son").hide();
}
});
})
</script>