jquery获取元素宽高，浏览器宽高，滚动距离

引入jquery

<script src="jquery路径"></script>

1.获取某个元素的宽和高

1、获取实际内容区域的宽和高：

width()和height();

2、获取实际内容区域+padding的宽和高：

innerWidth()和innerHeight();

3、获取实际内容区域+padding+border的宽和高：

outerWidth()和outerHeight();

4、获取实际内容区域+padding+border+margin的宽和高：

outerWidth(true)和outerHeight(true);

详细js代码，见下图。

2.获取浏览器的宽

$(window).width();  //浏览器当前窗口可视区域宽度
$(document).width();//浏览器当前窗口文档对象宽度
$(document.body).width();//浏览器当前窗口文档body的高度
$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度  包括border 

3.获取浏览器的高

$(window).height();  //浏览器当前窗口可视区域高度
$(document).height();  //浏览器当前窗口文档的高度
$(document.body).height();//浏览器当前窗口文档body的高度

$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度  包括border 

4.获取浏览器的滚动距离

//监听滚动事件

$(window).scroll( function (){

  //输出垂直的滚动距离

  console.log( $(this).scrollTop() );

  //输出水平的滚动距离

  console.log( $(this).scrollLeft() );

});