关于网页的宽&高

Gu_Yan 发布于2019-08-21 18:25 / 480人阅读

摘要：网页当前可见高宽和两者分别返回网页元素的总高度总宽度。网页总高度网页总宽度和两者分别表示元素的水平滚动条向右滚动的像素值，以及垂直滚动条向下滚动的像素值。若网页内没有滚动条，则其值为。

1. Element.clientHeight和Element.clientWidth

两者分别返回元素节点 可见部分 的高度和宽度。此“可见部分”包括padding、但不包括border、margin和滚动条。

let rootElement = document.documentElement;

//网页当前可见高&宽
rootElement.clientHeight
rootElement.clientWidth

2. Element.scrollHeight和Element.scrollWidth

两者分别返回网页元素的总高度 & 总宽度。其包括padding，但不包括border、margin和滚动条。

let rootElement = document.documentElement;

//网页总高度
rootElement.scrollHeight
document.body.scrollHeight
document.body.clientHeight

//网页总宽度
rootElement.scrollWidth
document.body.scrollWidth
document.body.clientWidth

3. Element.scrollLeft和Element.scrollTop

两者分别表示元素的水平滚动条向右滚动的像素值，以及垂直滚动条向下滚动的像素值。若网页内没有滚动条，则其值为 0。

let rootElement = document.documentElement;

//当垂直滚动条滚到最底部时，返回 true
rootElement.scrollHeight - rootElement.scrollTop === rootElement.clientHeight

//当水平滚动条滚到最右侧时，返回 true
rootElement.scrollWidth - rootElement.scrollLeft === rootElement.clientWidth

4. Element.offsetHeight和Element.offsetWidth

两者包括padding、border和滚动条。

let rootElement = document.documentElement;

//网页总高度
rootElement.offsetHeight
document.body.offsetHeight

//网页总宽度
rootElement.offsetWidth
document.body.offsetWidth

综上，获取网页高度&宽度的方法有：

let rootElement = document.documentElement;

//由于和的宽度可能设的不一样，从上取值会更保险一点。

//网页总高度
rootElement.offsetHeight
rootElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight
//网页总宽度
rootElement.offsetWidth
rootElement.scrollWidth
document.body.offsetWidth
document.body.scrollWidth


//可见部分高度
window.innerHeight             //包括滚动条
rootElement.clientHeight       //不包括滚动条
//可见部分宽度
window.innerWidth              //包括滚动条
rootElement.clientWidth        //不包括滚动条

云服务器 GPU云服务器 html限制字的宽 php 获取图片的宽 asp获取屏幕的宽高 asp &amp&amp逻辑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90441.html

关于网页的宽&amp;高

摘要：网页当前可见高宽和两者分别返回网页元素的总高度总宽度。网页总高度网页总宽度和两者分别表示元素的水平滚动条向右滚动的像素值，以及垂直滚动条向下滚动的像素值。若网页内没有滚动条，则其值为。 1. Element.clientHeight和Element.clientWidth 两者分别返回元素节点可见部分的高度和宽度。此可见部分包括padding、但不包括border、margin和...

sumory 2019-08-29 14:08 评论0 收藏0
HTML &amp; CSS 之小白再续前缘

摘要：标准文档流的常见现象空白折叠现象。浮动浮动的特点脱离标准文档流，元素一旦脱离标准文档流脱标，后面的元素会占据浮动元素原本的位置，而且元素就不再遵守文档流中块级元素和行内元素的特性。元素浮动会脱离文档流但是不会脱离文本流，所以会产生字围效果。 CSS 盒子模型（点击查看官方解释）实际上网页中的每一个标签都可以看成一个盒子模型，而这个盒子模型从内到外有以下这几个元素组成 conten...

Heier 2019-08-29 12:51 评论0 收藏0
HTML &amp; CSS 之小白再续前缘

摘要：标准文档流的常见现象空白折叠现象。浮动浮动的特点脱离标准文档流，元素一旦脱离标准文档流脱标，后面的元素会占据浮动元素原本的位置，而且元素就不再遵守文档流中块级元素和行内元素的特性。元素浮动会脱离文档流但是不会脱离文本流，所以会产生字围效果。 CSS 盒子模型（点击查看官方解释）实际上网页中的每一个标签都可以看成一个盒子模型，而这个盒子模型从内到外有以下这几个元素组成 conten...

taohonghui 2019-08-01 17:04 评论0 收藏0
【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&amp;ClientWidth&am

摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点主要参考自第一篇文章，然而笔者在读的时...

binta 2019-08-29 16:13 评论0 收藏0