offset and position
offset:相对于页面左上角的位置(可以有参数)
position:相对于父元素左上角的位置
$('#btn1').click(function(){
//相对于页面左上角的位置
var offset = $('.div1').offset()
console.log(offset.left,offset.top)
offset = $('.div2').offset()
console.log(offset.left,offset.top)
//相对于父元素左上角的位置
var position = $('.div1').position()
console.log(position.left,position.top)
position = $('.div2').position()
console.log(position.left,position.top)
})
//offset可以传入参数获取值
$('#btn1').click(function(){
$('.div2').offset({
left:50,
top:100
})
})
scroll
1. scrollTop():
读取/设置滚动条的Y坐标
2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
读取页面滚动条的Y坐标(兼容chrome和IE)
3. $('body,html').scrollTop(60);
滚动到指定位置(兼容chrome和IE)
l
<script type="text/javascript">
$('#btn1').click(function(){
console.log($('div').scrollTop())//页面滚动条的坐标
//兼容问题
console.log($('html').scrollTop()+$('body').scrollTop())//全部的滚动条
console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop())//全部的滚动条//效率高一点
})
$('#btn2').click(function(){
$('div').scrollTop(200)//滚动到指定的位置
$('html,body').scrollTop(300)
})
</script>
尺寸
<script src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
var $div = $('div')
//内容尺寸
console.log($div.width(),$div.height())//100.150
//内部尺寸
console.log($div.innerWidth(),$div.innerHeight())//120 170
//外部尺寸
//height+padding +border
console.log($div.outerWidth(),$div.outerHeight())
console.log($div.outerWidth(true),$div.outerHeight(true))
//如果是true再加上margin
</script>