js&jq：获取div的宽度、高度、屏幕距离方法总结

jq获取div的宽度

1. 只是获取content宽度
   var content = $(‘div’). width();
2. 获取content+padding的宽度
   var contentWithPadding = $(‘div’). innerWidth();
3. 获取content+padding+border的宽度
   var withoutMargin = $(‘div’). outerWidth();
4. 获取content+padding+border+margin的宽度
   var full = $(‘div’). outerWidth(true);

注：Margin 有个特色，就是当两个有 margin的 div 靠在一起时，两个 div 紧邻的 margin 不是相加，而是取其大者。
eg：两个 10px margin 的 div 并在一起==> 10px margin 的距离。
一个 20px margin，另一个为 10px margin==> 20px 的 margin。

但是获取当前元素的全部宽度的时候，还是获取自身的margin+content+padding+border的值

jq获取屏幕距离

1. 文档窗口高度
   $(window).height();
2. 标签距离顶部高度（没有到下面的距离$(“div”).offset().down）
   $("div").offset().top;
3. 是标签距离右边高度（没有到下面的距离，$(“div”).offset().right）
   $("div").offset().left;
4. 滚动条高度
   $(document).scrollTop();
5. 标签高度
   $("div").height();

js获取div的高度

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

1. 可视内容高度
   var clientHeight = div.clientHeight;
2. 占据页面总高度
   var offsetHeight = div.offsetHeight;
3. 展开滚动内容总高度
   var scrollHeight = div.scrollHeight;
4. 屏幕宽度
   var screenWidth = window.screen.width;

js获取屏幕距离

var div = document.getElementById(obj);

1. div离屏幕上边距离(长度)
   var topLength = div.getBoundingClientRect().top;
2. div离屏幕下边距离(长度)
   var bottomLength = div.getBoundingClientRect().bottom;
3. div离屏幕左边距离(长度)
   var leftLength = div.getBoundingClientRect().left;
4. div离屏幕右边距离(长度)
   var rightLength = div.getBoundingClientRect().right;