您的位置：首页 > Web前端 > JavaScript

关于js中距离相关整理

2018-03-12 11:14 295 查看
丁酉年六月初一，周六，有雨

宜敲代码，玩游戏；不宜出门，浪。

最近有些迷失，不过已经找到目标了，也一定会慢慢调整好的。（我是亮并非瑜）

一方面督促自己，一方面为了不辜负书哥大人的关注，我还是会不定期整理一下知识点，以待时变~

进入正题，关于js中“三大家族”以及其他距离方面的知识点，一直没有好好整理过，每次想到都觉得是一根刺，今天终于要拔掉了~

js中关于距离有三个家族，他们分别是
offset
，
client
，
scroll
；接下来我会写一个简单的demo将三大家族以及相关的属性或方法具体解释一下：

demo

首先定义一个如下的元素结构：

<body>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<div class="grandfather">
<div class="father">
<div class="self" id="self">
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
</body>


最上面
<br>
为了将页面撑起，有一定的卷去高度；

内部的
<br>
为了将元素撑起，有一定的卷去高度；

具体样式如下：

html,body{
margin: 0;
padding: 0;
}
.grandfather{
width: 500px;
height: 500px;
position: relative;
left: 50px;
top: 50px;
border: 5px solid #c1c1c1;
}
.father{
width: 400px;
height: 400px;
position: absolute;
top: 50px;
left: 50px;
border: 10px solid #d1d1d1;
}
.self{
width: 200px;
height: 200px;
margin: 50px;
padding: 20px;
border: 10px solid #b1b1b1;
background-color: skyblue;
overflow: auto;
}


最终页面如下



关于大小

首先获取到元素：

var myDiv = document.getElementById('self');


元素大小

offset
获取的是盒子的所占的大小（margin不算是盒子的主体部分），也就是说实际大小是 border+ padding+ width/height

console.log(myDiv.offsetWidth);         /*260*/
console.log(myDiv.offsetHeight);           /*260*/


client
获取的是盒子可视的大小，也就是（padding + width/height - 滚动条）

console.log(myDiv.clientWidth);         /*223*/
console.log(myDiv.clientHeight);           /*223*/


scroll
获取的是盒子中内容的真实高度，也就是（padding + content）

console.log(myDiv.scrollWidth);         /*312*/
console.log(myDiv.scrollHeight);           /*328*/


获取css中元素width/height

getComputedStyle
/ 
currentStyle
有兼容性问题，获取的结果带有
px
，需要使用 
parseInt


console.log(getComputedStyle(myDiv, false)["width"])    /*183px*/
console.log(getComputedStyle(myDiv, false)["height"])   /*183px*/


窗口的文档显示区大小

获取到窗口的显示区大小，需要处理一定的兼容性问题：

function getClient() {
return {
width: window.innerWidth || document.documentElement.clientWidth
|| document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight
|| document.body.clientHeight || 0
}
}
console.log(getClient().width);
console.log(getClient().height);


关于浏览器或者屏幕相关的数据，可自行百度~ Screen对象等

关于距离

元素距离

offset
获取的是相对于
offsetParent
的距离

console.log(myDiv.offsetLeft);          /*50*/
console.log(myDiv.offsetTop);           /*50*/


client
获取的是盒子边框的宽度（很少用）

console.log(myDiv.clientLeft);          /*10*/
console.log(myDiv.clientTop);           /*10*/


scroll
获取的是盒子内容卷去的高度（和滚动条相关）

console.log(myDiv.scrollLeft);          /*内容卷去的高度*/
console.log(myDiv.scrollTop);            /*内容卷去的宽度*/


获取css中元素left/top

getComputedStyle
/ 
currentStyle
有兼容性问题，获取的结果带有
px
，需要使用 
parseInt


console.log(getComputedStyle(myDiv, false)["Left"])
/*undefined(因为盒子未定位，没有left和top)*/

console.log(getComputedStyle(myDiv, false)["Top"])
/*undefined（因为盒子未定位，没有left和top）*/


元素boder外边缘 距离窗口 （getBoundingClientRect()）

console.log(myDiv.getBoundingClientRect().left);                /*160 (50+5+50+10+50)*/
console.log(myDiv.getBoundingClientRect().top);                 /*160*/


元素boder外边缘距离页面文档，累加offset

function getToPage(){
var _myDiv = myDiv;
var divPageY = 0;
var divPageX = 0;
while(_myDiv.offsetParent){
divPageY += _myDiv.offsetTop + parseInt(getComputedStyle(_myDiv.offsetParent, false)["border-top-width"]);
divPageX += _myDiv.offsetLeft + parseInt(getComputedStyle(_myDiv.offsetParent, false)["border-left-width"]);
_myDiv = _myDiv.offsetParent;
}
return {divPageY: divPageY, divPageX: divPageX}
}
console.log(getToPage().divPageX);
console.log(getToPage().divPageY);


页面卷去距离

需要处理一下兼容性问题。。

function getScroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop
|| document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft
|| document.body.scrollLeft || 0
};
}
console.log(getScroll().top)
console.log(getScroll().left)


鼠标的距离

需要获取到鼠标点击等事件的
e
；有兴趣可以打印
e
研究其包含的各种属性；

myDiv.addEventListener('click',function(e){
var e = e || window.event;
console.log(e.offsetX, e.offsetY);  /*鼠标到自身border的距离*/
console.log(e.clientX, e.clientY);    /*鼠标到屏幕距离*/
console.log(e.pageX, e.pageY);      /*鼠标到页面文档的距离*/
})


暂时能想到的相关内容就这么多了，如果后续有可以补充的，也会补充进来。

最后贴一张最经典的图，以便更好的理解！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  js距离 js大小 三大家族
相关文章推荐
新的分享
章节导航