web前端全系列 教程
1839个小节阅读:2244k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
属性 | 描述 |
---|---|
clientHeight | 获取元素高度包括padding 部分,但是不包括border 、margin |
clientWidth | 获取元素宽度包括padding 部分,但是不包括border 、margin |
clientLeft | 元素节点左边框(left border)的宽度 |
clientTop | 元素节点上边框(top border)的高度 |
scrollHeight | 元素总高度,它包括padding ,但是不包括border 、margin 包括溢出的不可见内容 |
scrollWidth | 元素总宽度,它包括padding ,但是不包括border 、margin 包括溢出的不可见内容 |
scrollLeft | 元素的水平滚动条向右滚动的像素数量 |
scrollTop | 元素的垂直滚动条向下滚动的像素数量 |
offsetHeight | 元素的 CSS 垂直高度(单位像素),包括元素本身的高度、padding 和 border |
offsetWidth | 元素的 CSS 水平宽度(单位像素),包括元素本身的高度、padding 和 border |
offsetLeft | 到定位父级左边界的间距 |
offsetTop | 到定位父级上边界的间距 |
Element.clientHeight
属性返回一个整数值,表示元素节点的 CSS 高度(单位像素),只对块级元素生效,对于行内元素返回0
。如果块级元素没有设置 CSS 高度,则返回实际高度
除了元素本身的高度,它还包括padding
部分,但是不包括border
、margin
。如果有水平滚动条,还要减去水平滚动条的高度。注意,这个值始终是整数,如果是小数会被四舍五入。
Element.clientWidth
属性返回元素节点的 CSS 宽度,同样只对块级元素有效,也是只包括元素本身的宽度和padding
,如果有垂直滚动条,还要减去垂直滚动条的宽度。
document.documentElement
的clientHeight
属性,返回当前视口的高度(即浏览器窗口的高度)。document.body
的高度则是网页的实际高度。
xxxxxxxxxx
// 视口高度
document.documentElement.clientHeight
// 网页总高度
document.body.clientHeight
Element.clientLeft
属性等于元素节点左边框(left border)的宽度(单位像素),不包括左侧的padding
和margin
。如果没有设置左边框,或者是行内元素(display: inline
),该属性返回0
。该属性总是返回整数值,如果是小数,会四舍五入
Element.clientTop
属性等于网页元素顶部边框的高度(单位像素)
xxxxxxxxxx
var box = document.getElementById("box");
console.log(box.clientLeft);
console.log(box.clientTop);
Element.scrollHeight
属性返回一个整数值(小数会四舍五入),表示当前元素的总高度(单位像素),它包括padding
,但是不包括border
、margin
以及水平滚动条的高度(如果有水平滚动条的话)
Element.scrollWidth
属性表示当前元素的总宽度(单位像素),其他地方都与scrollHeight
属性类似。这两个属性只读
整张网页的总高度可以从document.documentElement
或document.body
上读取
xxxxxxxxxx
// 返回网页的总高度
document.documentElement.scrollHeight
document.body.scrollHeight
实时效果反馈
1. 下面是获得整个网页的宽度和高度:
xxxxxxxxxx
document.documentElement.___
document.documentElement.___
A offsetLeft offsetTop
B scrollHeight scrollWidth
C clientLeft clientTop
D clientHeight clientWidth
答案
1=>D