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