持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情
前言
JavaScript是基础并且是非常重要的一部分，现在项目基本都靠框架开发，很多原生方法得不到使用就会慢慢忘记，所以借着6月更文好好复习一下基础知识，今天讲的主要是元素尺寸 。
CSS包含块
视觉格式化模型的一个重要概念，它与盒模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。
如何判断元素的包含块
- 如果元素position属性是static和relative 则包含块是根元素
- 如果元素position属性是absolute 则包含块是最近的定位祖辈元素
- 如果元素position属性是fixed 则包含块是窗口
HTMLElement对象详解
当了解了CSS包含块之后，开始对几个平时容易弄混淆的几个HTMLELement对象进行一下详解
- offsetLeft
- 如果其祖辈元素有不为static的定位属性，则这个祖辈元素就是其包含块
- 获取一个元素的左边框外侧 到 其包含块的边框内部的距离
- clientLeft
- 其实就是左边框的宽度
- scrollLeft
- 获取或者设置元素的滚动条的位置
- offsetParent
- 获取元素的最近定位父级
结合上一章介绍的offsetWidth、clientWidth、scrollWidth 画了张图避免弄混淆
常用到的关于获取元素对象的属性方法
获取文档的宽高
- 主流浏览器中: html的offsetHeight就是文档的高度
- ie低版本（6）: body.offsetHeight就是文档的高度
- document.documentElement.offsetWidth 宽度获取的不是文档的宽度，而是窗口的宽度（水平方向不会出现滚动条）
- document.documentElement.offsetHeight 高度获取的是真正文档的高度
获取和设置滚动条的位置
- 获取系统滚动条
- 高版本浏览器(ie7及以上) html的scrollTop
- ie6-：body的scrollTop
- 高版本浏览器（ie9及以上）window.pageYoffset
- 设置系统滚动条
- 可以直接对html或body的scrollTop属性直接设置
- 也可以使用window.scrollTo();完美兼容的 接受两个参数，一个是x滚动条位置 一个是y滚动条位置
封装一个全兼容的获取系统滚动条的方法
<body>
<div class="box">
<button class="btn">点击我获取滚动条高度</button>
</div>
</body>
<script>
var oBtn = document.querySelector('.btn')
oBtn.onclick = function(){
console.log(getWinYScroll())
}
//封装一个全兼容的获取系统滚动条的方法
function getWinYScroll() {
var html = document.documentElement;
var body = document.body;
return window.pageYoffset || html.scrollTop || body.scrollTop;
}
</script>
<style>
.box{
height:3000px
}
.btn{
position: fixed;
}
</style>
再写一个浏览器常用的回到顶部的demo
<body>
<div class="box">
<div class="top">回到顶部</div>
</div>
</body>
<script>
var oBox = document.querySelector('.box')
var oTop = document.querySelector('.top')
var returnTopTimer = null;
//监听滚动条事件，判断滚动条的位置 从而让按钮显示隐藏
window.onscroll = function(){
//监听系统滚动条的位置 是否大于500
if(window.pageYOffset>500){
oTop.style.display = 'block'
} else{
oTop.style.display = 'none'
}
}
//点击按钮回到顶部---直接回到顶部
oTop.onclick = function(){
clearInterval(returnTopTimer)
//动画的起始位置:当前滚动条的位置
var startLocation = window.pageYOffset;
//动画的结束位置：
var endLocation = 0;
//起始步数
var startStep = 0;
//结束步数
var endStep = 80;
//每一步所走的距离
var everyStep = (endLocation - startLocation) / (endStep - startStep);
//开始动画
returnTopTimer = setInterval(function () {
//让初始位置累加每一步所走的距离
startLocation += everyStep;
//起始步数先累加，用来判断是否走完
startStep++;
//判断
if (startStep >= endStep) {
clearInterval(returnTopTimer);
}
//把本次初始位置的位置 赋值
window.scrollTo(0, startLocation);
}, 1)
}
</script>
<style>
.box {
height:4000px
}
.top{
display: none;
position: fixed;
bottom: 0;
right: 0;
width:100px;
height:100px;
line-height: 100px;
background-color:pink;
color: #fff;
font-weight: 700;
font-size: 18px;
text-align: center;
}
</style>
</style>
最后再介绍个getBoundingClientRect() 获取元素四个方法到视窗左和上的距离
-
left:元素左侧 到 视窗 左侧的距离
-
right:元素右侧 到 视窗 左侧的距离
-
top:元素上侧 到 视窗 上侧的距离
-
bottom:元素下侧 到 视窗 上侧的距离
-
width：元素的宽度（border-box）
-
height:元素的高度
好了，以上就是本篇文章的分享，感谢阅读！
