js&jq获取div宽、高、屏幕距离

总结前端常用的获取宽高的方法，建议背过使用方便！！

jquery

//获取content宽度
var content = $('div'). width();

//获取content+padding的宽度
var contentWithPadding = $('div'). innerWidth();

//获取content+padding+border的宽度
var withoutMargin = $('div'). outerWidth();

//获取content+padding+border+margin的宽度
var full = $('div'). outerWidth(true);

//文档窗口宽度
$(window).width();

//文档窗口高度
$(window).height();

//标签距离顶部高度（没有到下面的距离$(“div”).offset().down）
$("div").offset().top;

//签距离右边高度（没有到下面的距离，$(“div”).offset().right）
$("div").offset().left;

//滚动条高度
$(document).scrollTop();

//标签高度
$("div").height();

js

var div = document.getElementById("div");

//可视内容高度
var clientHeight = div.clientHeight;

//占据页面总高度
var offsetHeight = div.offsetHeight;

//展开滚动内容总高度
var scrollHeight = div.scrollHeight;

//屏幕宽度
var screenWidth = window.screen.width;

//屏幕高度
var screenWidth = window.screen.height;

//div离屏幕上边距离(长度)
var topLength = div.getBoundingClientRect().top;

//div离屏幕下边距离(长度)
var bottomLength = div.getBoundingClientRect().bottom;

//div离屏幕左边距离(长度)
var leftLength = div.getBoundingClientRect().left;

//div离屏幕右边距离(长度)
var rightLength = div.getBoundingClientRect().right;