丁酉年六月初一,周六,有雨
宜敲代码,玩游戏;不宜出门,浪。
最近有些迷失,不过已经找到目标了,也一定会慢慢调整好的。(我是亮并非瑜)
一方面督促自己,一方面为了不辜负书哥大人的关注,我还是会不定期整理一下知识点,以待时变~
进入正题,关于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); /*鼠标到页面文档的距离*/
})
暂时能想到的相关内容就这么多了,如果后续有可以补充的,也会补充进来。
最后贴一张最经典的图,以便更好的理解!