目录
获取网页文档内容大小的方法(不包括溢出的内容:margin)
什么是浏览器的页面,什么是浏览器的窗口
首先我们得了解:
1、浏览器页面:
浏览器页面的大小是由内容的多少和样式决定的,可以这么说,浏览器页面就是由内容撑开的区域。
2、浏览器窗口:
浏览器窗口,是我们浏览网页时当前可见的那部分,又叫做viewport(视口)
了解了上面这两,我们可以知道,浏览器页面跟浏览器窗口并不是同一个东西。
他们的大小也不相同。
1、
当网页中的所有内容可以在浏览器窗口中全部显示的时候,浏览器页面的大小也就等于浏览器窗口的大小。
2、
当不能全部显示,就会在窗口中产生滚动条,滑动滚动条才可以浏览整个浏览器页面的内容
由此,我们可以进行以下方法属性的调用,来得到浏览器页面、浏览器窗口即他们里面的元素的大小和位置。
获取视口的大小
clientHeight和clientWidth
网页中的每个元素都有两个属性:
1、clientHeight
2、clientWidth
在知道他们的作用之前,我们得了解一个元素的组成:
除去怪异盒模型之外,一个元素一般都是由:
内容(content)+内填充(padding)+边框(border)
组成的
模型如下:
而我们的clientWidth和clientHeight就只是包括padding和content部分的内容:
内容(content)+内填充(padding)
我们想获取视口的大小时,就可以利用此属性:
<script>
//获取页面的视口宽度
document.documentElement.clientWidth
//获取页面的视口高度
document.documentElement.clientHeight
</script>
但是我们要注意的是:
1、clientWidth和clientHeight必须要在页面加载完后才能运行,否则对象还没生成,直接会报错
2、他们是只读属性,不能进行赋值
3、只包括padding和content部分,边框、滚动条和视窗之外的内容都不包括
元素时:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<style>
div {
width: 600px;
height: 400px;
border: 20px solid #900;
margin: 0 auto;
}
</style>
<body>
<div></div>
</body>
<script>
var div = document.querySelector('div')
console.log(div.clientWidth);
console.log(div.clientHeight);
</script>
</html>
此时我们可以看下控制台:
可以很清楚的看出,他并没有包括边框的那部分
他的返回值是一个数值
获取网页文档内容大小的方法(不包括溢出的内容:margin)
offsetWidth和offsetHeight
1、offsetWidth
2、offsetHeight
这种方法属性跟上面的就有所区别了,他所包括的地方是上面的扩容版:
内容(content)+内填充(padding)+边框(border)
也就是他包括了几乎所有的内容,要注意的是,他并不包括溢出的部分(元素中不包括margin)。
获取DOM文档的根节点html元素对象的高度,有可能小于视口高度(由文档内容高度决定,不包括溢出的内容margin)
内容(content)+内填充(padding)+边框(border)+滚动条宽度(scroll)+视窗之外的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<style>
div {
width: 600px;
height: 400px;
border: 20px solid #900;
margin: 0 auto;
}
</style>
<body>
<div></div>
</body>
<script>
console.log(document.documentElement.offsetWidth);
console.log(document.documentElement.offsetHeight);
var div = document.querySelector('div')
console.log(div.offsetWidth);
console.log(div.offsetHeight);
</script>
</html>
他的返回值是一个数值
视口升级滚动条专属版
scrollWidth和scrollHeight
1、scrollWidth
2、scrollHeight
有标题我们就知道,他就是在视口(clientWidth/clientHeight)的基础上多上了一些东西:
内容(content)+内填充(padding)+视窗之外的内容
这个是在有滚动的溢出视口之外的内容时使用的一种属性
在没有滚动条的情况下(即没有视口之外的内容),他其实跟clientWidth和clientHeight没有区别
返回值是一个数值
获取网页元素的绝对位置
offsetTop和offsetLeft
1、offsetTop
2、offsetLeft
概念
相对于第一个拥有定位的父元素的左上角的距离
相对于网页时(即他的父元素全部都没有定位的时候),我们的这个属性就相当于元素相对于整个网页左上角的距离
注意,是距离
绝对位置 需要我们计算出来。
其实简单的说就是子元素相对于拥有定位的父元素(offsetParen)的相对距离
这个属性与绝对定位的概念很相似,都是参照最近的拥有定位的父元素。
1、这个是相对于父元素的距离。
2、他的返回值是数值
3、他是只读的
获取边框的大小
clientLeft和clientTop
当我们使用clientWidth和clientHeight时,我们获得了该元素的内容大小(content)和内填充大小(padding),此时我们想再得到边框的大小,就可以利用以下属性:
1、clientLeft
2、clientTop
他返回的值是一个数值