常用的一些获取尺寸的方法

Posted 2020-11-10 cuigege

今天，我们来说一个比较小的点，但也是比较常用的知识点，就是获取尺寸的方法。

首先，我们先来说一下获取可视区的宽度，但前提你要知道什么是可视区，就是我们现在双眼所看的这个界面，当然不包括滚动条拉下去之后的啦，

 

 

接下来我们说一下方法：

//获取可视区的宽度

document.documentElement.clientWidth;

//获取可视区的高度

document.documentElement.clientHeight;

那如果你还不理解的话，我们来个比较官方的说法：clientWidth和clientHeight这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em之类，它还是会返回px的大小。(CSS获取的话，是照着你设置的样式获取)。对于元素的实际大小，clientWidth和clientHeight理解方式如下：
a. 增加边框，无变化；
b. 增加外边距，无变化；
c. 增加滚动条，最终值等于原本大小减去滚动条的大小；
d. 增加内边距，最终值等于原本大小加上内边距的大小；

我们可以看一下在网页里的实际情况

 

 

//获取滚动条的滚动的距离

document.documentElement.scrollTop

但是在IE中有兼容性问题，所以我们要怎么解决这个问题呢，我们可以这样做

var t = document.documentElement.scrollTop||document.body.scrollTop

我们可以这样用

window.onscroll = function(){

         var t = document.documentElement.scrollTop||document.body.scrollTop

         console.log(t)

}

上面我们都有在说一些获取的尺寸都是可视区，那我们再说一下获取整个页面的尺寸要如何做：

//获取整个页面的宽度

document.body.clientWidth;

//获取整个页面的高度

document.body.clientHeight;

最后，给大家普及一个我们经常在网页上看到的右边的回到顶部的做法，也刚好用到我们上面所讲的知识。

首先，我们设置回到顶部那个小方块必须在浏览器的可视区的正中间

//获取可视区的高度的一半减去元素的高度的一半  (当前元素就会在浏览器的正中央)

var iH = document.documentElement.clientHeight/2-box.offsetHeight/2;

box.style.top = iH+‘px‘;

window.onscroll = function(){

    //滚动的时候获取滚动条的滚动距离

    var t = document.documentElement.scrollTop || document.body.scrollTop;

    //小方块的top值就等于 iH+ 滚动条的滚动距离

    box.style.top = t+iH+‘px‘;

}

 

box.onclick = function(){

    //让滚动条的滚动距离为0就可以回到顶部了

    document.documentElement.scrollTop = document.body.scrollTop = 0

}

 

 

 

当点击红色小方块的时候，可以快速回到顶部，而他也始终保留在可视区的中间。

 

好了，细碎的知识点就讲到这里，欢迎批评改正。