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;