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

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

jq获取div的宽度
只是获取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);
注：Margin 有个特色，就是当两个有 margin的 div 靠在一起时，两个 div 紧邻的 margin 不是相加，而是取其大者。
eg：两个 10px margin 的 div 并在一起==> 10px margin 的距离。
一个 20px margin，另一个为 10px margin==> 20px 的 margin。

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

jq获取屏幕距离
文档窗口高度
$(window).height();
标签距离顶部高度（没有到下面的距离$(“div”).offset().down）
$(“div”).offset().top;
是标签距离右边高度（没有到下面的距离，$(“div”).offset().right）
$(“div”).offset().left;
滚动条高度
$(document).scrollTop();
标签高度
$(“div”).height();
js获取div的高度
var div = document.getElementById(“div”);

可视内容高度
var clientHeight = div.clientHeight;
占据页面总高度
var offsetHeight = div.offsetHeight;
展开滚动内容总高度
var scrollHeight = div.scrollHeight;
屏幕宽度
var screenWidth = window.screen.width;
js获取屏幕距离
var div = document.getElementById(obj);

div离屏幕上边距离(长度)
var topLength = div.getBoundingClientRect().top;
div离屏幕下边距离(长度)
var bottomLength = div.getBoundingClientRect().bottom;
div离屏幕左边距离(长度)
var leftLength = div.getBoundingClientRect().left;
div离屏幕右边距离(长度)
var rightLength = div.getBoundingClientRect().right;
————————————————
版权声明：本文为CSDN博主「想上天的玖姑娘」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kxy5201314/article/details/120882497