DOM尺寸

视口

  • 定义：
    视口指实际显示内容的可见区域。

视口的分类（两类）

  • 1.窗口视口：窗口视口就是浏览器窗口中实际显示文档内容的区域。
    不包含：1.浏览器的“外框”,如菜单栏、工具栏和标签栏，但是包含滚动条。

  • 2.元素视口：对于元素而言，“视口”指一个元素实际显示元素内容的区域，即：内容区+padding区域。
    如果元素内容发生溢出产生滚动条的情况下，
    视口不包含滚动条。

    dom-dimensions.png

查询视口尺寸（视口、文档、文档滚动的尺寸）

  • window.innerinnerHeight(一呢害子)
  • 定义：属性是一个只读属性，用于查询窗口视口的高度(含滚动条)。
  • 语法：
window.innerHeight
  • 返回值:
    返回一个不带单位的像素值，表示窗口的视口(内部)高度，包括水平滚动条的高度.
  • 示例：
document.onclick = function(){
    console.log(window.innerHeight);//385
    document.body.style.width = '2000px'//设置水平滚动条
    console.log(window.innerHeight);//385
}
  • window.innerWidth (一呢位子)
  • 定义：
    属性是一个只读属性，用于查询窗口视口的高度(含滚动条)
  • 语法：
window.innerWidth
  • 返回值：
    返回一个不带单位的像素值，表示窗口的视口(内部)宽度，包括垂直滚动条的高度。
  • 示例：
document.onclick = function(){
    console.log(window.innerWidth);//450
    document.body.style.height = '2000px'//设置垂直滚动条
    console.log(window.innerWidth);//450
}

当我们把根元素.clientHeight应用在<html>根元素上的时候，它查询的是浏览器窗口的视口高度。

当我们把根元素.clientWidth应用在<html>根元素上的时候，它查询的是浏览器窗口视口宽度。

根元素.clientHeight

定义:
根元素.clientHeight用于用于查询窗口视口的高度(不含滚动条)。

  • 语法：
document.documentElement.clientHeight//标准模式
document.body.clientHeight//怪异模式
  • 返回值:
    返回一个不带单位的像素值，表示窗口的视口(内部)宽度，不包括垂直滚动条的高度。
  • 示例：
console.log(window.innerHeight);//返回385
console.log(document.documentElement.clientHeight);//返回385
document.body.style.width = '2000px'
document.body.style.height = '2000px'
console.log(window.innerHeight);//返回385
console.log(document.documentElement.clientHeight);//返回385

根元素.clientWidth

定义:
用于用于查询窗口视口的宽度(不含滚动条)。

  • 语法：
document.documentElement.clientWidth//标准模式
document.body.clientWidth//怪异模式
  • 返回值:
    返回一个不带单位的像素值，表示窗口的视口(内部)宽度，不包括垂直滚动条的高度
  • 示例：
console.log(window.innerWidth);//返回450
console.log(document.documentElement.clientWidth);//返回450
document.body.style.width = '2000px'
document.body.style.height = '2000px'
console.log(window.innerWidth);//返回450
console.log(document.documentElement.clientWidth);//返回450

根元素.offsetWidth

  • 定义：用于查询文档的宽度。只读属性。
    注意：注：文档的整体大小与<html>元素的大小相同，所以要获得文档的宽度，可以在根元素document.docmentElement上查询。
  • 语法：
document.documentElement.offsetWidth //标准模式
document.body.offsetWidth //怪异模式
  • 返回值:
    返回一个整数，表示文档的像素宽度。
  • 示例：
document.documentElement.offsetWidth //
document.body.offsetWidth //

根元素.offsetHeight

  • 定义：用于查询文档的高度。只读属性。
    注：文档的整体大小与<html>元素的大小相同，所以要获得文档的高度，可以在根元素document.docmentElement上查询。
  • 语法：
document.documentElement.offsetHeight //标准模式
document.body.offsetHeight //怪异模式
  • 返回值:
    返回一个整数，表示文档的像素高度。
  • 示例：
document.documentElement.offsetHeight //
document.body.offsetHeight //

window.scrollY

  • 定义：属性是一个只读属性，用于查询文档垂直滚动距离。
  • 语法：
window.scrollY
window.pageYOffset //window.scrollY的别名属性
  • 返回值:
    返回一个数值，表示文档垂直滚动的像素距离。
  • 示例：
body{
  height:200vh;
}
<script>
document.onclick = function(){
  console.log(window.scrollY)
}
</script>

window.scrollX

  • 定义：属性是一个只读属性，用于查询文档水平滚动距离。
  • 语法：
window.scrollX
window.pageXOffset //window.scrollY的别名属性
  • 返回值:
    返回一个数值，表示文档水平滚动的像素距离。
  • 示例：
body{
width:200vh;
}
<script>
document.onclick = function(){
  console.log(window.scrollX)
}

</script>

根元素.scrollTop

  • 定义：属性用于查询或设置元素内容垂直滚动的像素距离。
  • 语法：
document.documentElement.scrollTop //查询文档的垂直滚动距离
document.documentElement.scrollTop = 100 //设置文档的垂直滚动距离为100px
  • 返回值:
    返回任意数值，表示文档垂直滚动的像素距离。
  • 示例：
body{
  height:200vh;
}
<script>
document.onclick = function(){
    console.log(document.documentElement.scrollTop);
    document.documentElement.scrollTop += 50 //每次垂直滚动50像素
}
</script>

根元素.scrollLeft

  • 定义： 属性用于查询或设置元素内容水平滚动的像素距离。
  • 语法：
document.documentElement.scrollLeft //查询文档的水平滚动距离
document.documentElement.scrollLeft = 100 //设置文档的水平滚动距离为100px
  • 返回值:
    返回任意数值，表示文档水平滚动的像素距离
  • 示例：
body{
  width:200vh;
}

<script>
document.onclick = function(){
    console.log(document.documentElement.scrollLeft);
    document.documentElement.scrollLeft += 50 //每次水平滚动50像素
}
</script>

元素.scrollTop

  • 定义：获取文档滚动距离

设置文档滚动尺寸

window.scrollTo()

  • 定义：用于查询滚动条的滚动距离。
  • 语法：
  • 返回值：
  • 示例：

实现平滑效果

html{
    scroll-behavior:smooth;
}
尺寸对照表 如下
元素尺寸 （元素:高/宽）： 不含margin（外边距）的边框盒尺寸 元素.offsetWidth 元素.offsetHeight
元素视口宽/元素视口高： width(宽)+padding（内边距）- 滚动条（17-15不一样）（视口尺寸） 元素.clientWidth 元素.clientHeight
元素内容区高度/元素内容区宽度： 视口尺寸+不可视部分的尺寸 元素.scrollWidth 元素.scrollHeight
获取元素内容滚动距离： 元素.scrollTop 元素.scroll left
获取文档滚动距离 根元素.scrollTop 元素.scroll left
查询文档滚动尺寸(x水平/y垂直) window.scrollY window.scrollX

浏览器中有几种坐标？
视口坐标，文档坐标 ，光标坐标

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容