8.jQuery中各种宽和高以及setoff,scroll

jQuery中各种宽和高以及setoff,scroll"/>

8.jQuery中各种宽和高以及setoff,scroll

1. jQuery中的各种宽高

• width()和height() 就是获取纯粹的宽和高
  设置的就是纯粹的宽和高

• innerWidth() 和 innerHeight() 获取带padding的宽和高
  设置多少，最终得到的是减掉padding的宽和高

• outWidth() 和 outerHeight() 获取带padding和边框的宽和高
  设置多少，最终得到是减掉padding和边框的宽和高
  以上获取的都是不带单位的宽度和高度
  2.offset()和padding()

• offset()： 获取的是盒子到document的left和top距离
  得到的是一个对象，对象里有left和top两个属性
  也是设置到document的距离
  设置的时候，传入一个对象，对象里2个属性一个left一个top

1. position():
   简单来说就是获取自身的left和top值
   得到的也是一个对象，对象里有left和top
   以上获取的都是不带单位的数字

   console.log($('.box').offset());$('.box').offset({left:200,top:40});// console.log( $('.box').position() );// 只能获取，不能设置// $('.box').position({//     left:30000,//     top:40// })// 带单位的字符串console.log( $('.box').css('left') );

3. scrollLeft()和scrollTop()
JS原生：
scrollLeft和scrollTop 获取往左和往上滚出去的距离
jQuery里也有，而且写法一毛一样，但是jQuery里面是方法，所以要加括号
作用都是一样的
如果要用动画效果设置滚出去距离用animate
但是要记住，不带动画控制滚动条。直接用window
要带动画控制页面滚动，要写死 ‘html,body’

  $('#get').click(function(){console.log($('.box').scrollLeft(), $('.box').scrollTop());})$('#set').click(function(){// 设置滚出去的距离// $('.box').scrollLeft(1000);// $('.box').scrollTop(5000);// $('.box').animate({//     scrollLeft:1000,//     scrollTop:5000// },1000);// 跟页面有关的滚动条找window就行了// $(window).scrollTop(1000);// 如果要让页面滚动用动画，必须写死 html,body$('html,body').animate({scrollTop:3000},1000);})