jquery位置信息

jquery位置信息

内容宽高

// width() height() 没有参数是获取值，有参数是设置值
console.log($('.box').width());  // 获取的内容宽高，即style中设置的内容宽高
console.log($('.box').height());

//设置宽高
$('.box').height('300px');
$('.box').width('300px');

内部宽高
内部宽高=内容宽高+padding

// 内部宽，内部高   innerHeight() innerWidth() 包含内部的宽和padding，不包含border
console.log($('.box').innerWidth())
// 设置宽高修改的是内容的宽高，和border、padding没有关系
$('.box').innerHeight('500px');

外部宽高
外部宽高=内容宽高+padding+border

// 外部宽高， outerWidth() outerHeight(), 包含内部宽高+padding+border。
console.log($('.box').outerWidth());

偏移量
相对于页面顶部和页面左侧的偏移量

// 偏移量 offset() 返回值是一个对象，对象中包含了top和left属性,与父相子绝的位置没有关系，只是和页面顶部和左侧的距离。
console.log($('.box').offset());
console.log($('.box').offset().top);  // 距离页面顶部的距离，属性是只读的，不能修改
console.log($('.box').offset().left);

页面滚动距离

// 滚动的偏移距离，即页面卷起的高度 scrollTop scrollLeft
$(document).scrollTop(100);  // 直接滚动到100px的位置

// 监听滚动
$(document).scroll(function(){
	console.log($(this).scrollTop());
})