網(wǎng)頁文檔的大小和瀏覽器窗口的大小
首先，要明確兩個(gè)基本概念摄闸。
一張網(wǎng)頁的全部面積善镰，就是它的大小。通常情況下年枕，網(wǎng)頁的大小由網(wǎng)頁內(nèi)容的多少和CSS樣式表決定炫欺。
瀏覽器窗口的大小，則是指在瀏覽器窗口中看到的那部分網(wǎng)頁面積熏兄，又叫做viewport（視口）品洛。
很顯然树姨，如果網(wǎng)頁的內(nèi)容能夠在瀏覽器窗口中全部顯示（也就是不出現(xiàn)滾動(dòng)條），那么網(wǎng)頁的大小和瀏覽器窗口的大小是相等的桥状。如果不能全部顯示帽揪，則滾動(dòng)瀏覽器窗口，可以顯示出網(wǎng)頁的各個(gè)部分辅斟。
獲取視口的大小
網(wǎng)頁上的每個(gè)元素转晰，都有clientHeight和clientWidth屬性。這兩個(gè)屬性指元素的內(nèi)容部分再加上padding的所占據(jù)的視覺面積士飒，不包括border和滾動(dòng)條占用的空間查邢。
document元素的clientHeight和clientWidth屬性，就代表了視口的大小酵幕。
document.documentElement.clientWidth
document.documentElement.clientHeight
使用的時(shí)候扰藕，有2個(gè)地方需要注意：
- 這個(gè)函數(shù)必須在頁面加載完成后才能運(yùn)行，否則document對(duì)象還沒生成芳撒，瀏覽器會(huì)報(bào)錯(cuò)邓深。
- clientWidth和clientHeight都是只讀屬性，不能對(duì)它們賦值番官。
元素.clientHeight 是元素內(nèi)容的height+padding
比如：div.clientHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#test{
width: 100px;
height: 150px;
padding: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="test">
aaaaaaaaaaaaaaa
aaaaaaaaaaaaaaa
aaaaaaaaaaaaaaa
aaaaaaaaaaaaaaa
aaaaaaaaaaaaaaa
aaaaaaaaaaaaaaa
aaaaaaaaaaaaaaa
aaaaaaaaaaaaaaa
aaaaaaaaaaaaaaa
aaaaaaaaaaaaaaa
</div>
<script>
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
var div = document.getElementById('test')
console.log(div.clientWidth);
console.log(div.clientHeight);
</script>
</body>
</html>
獲取網(wǎng)頁文檔內(nèi)容大小的方法(不包括溢出的內(nèi)容)
document.documentElement.offsetWidth
獲取DOM文檔的根節(jié)點(diǎn)html元素對(duì)象的寬度，即offsetWidth=width+padding+border钢属，不包括margin徘熔。
document.documentElement.offsetHeight
獲取DOM文檔的根節(jié)點(diǎn)html元素對(duì)象的高度，有可能小于視口高度（由文檔內(nèi)容高度決定淆党，不包括溢出的內(nèi)容）酷师，即offsetHeight=height+padding+border，不包括margin染乌。
元素.offsetHeight是元素設(shè)定的height+padding+border（不包括溢出的內(nèi)容）
比如：div.offsetHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
#test{
width: 100px;
height: 150px;
padding: 20px;
border: 1px solid red;
}
</style>
</head>
<!--可以去掉style="height: 2000px"觀察一下-->
<body style="height: 2000px">
<div id="test">
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</div>
<script>
console.log(document.documentElement.offsetWidth);
console.log(document.documentElement.offsetHeight);
var div = document.getElementById('test')
console.log(div.offsetWidth);
console.log(div.offsetHeight);
</script>
</body>
</html>
js實(shí)現(xiàn)小球觸壁反彈
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mainBox {
width: 300px;
height: 500px;
background: lavender;
border: 1px solid gold;
margin: auto;
position: relative;
}
.ball {
width: 30px;
height: 30px;
background: cyan;
border-radius: 50%;
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div id="mainBox">
<div class="ball">
</div>
</div>
</body>
<script type="text/javascript">
//公共變量
var ball_ = document.getElementsByClassName('ball')[0]
var mainBox = document.getElementById("mainBox")
//小球移動(dòng)變量
var x = 0;
var y = 0;
var speedX = 2;
var speedY = 2;
//定時(shí)器
var timer = null;
timer = setInterval('move()', 10)
function move() {
x += speedX;
y += speedY;
//判斷小球是否碰到邊界
if(x <= 0 || x > mainBox.offsetWidth - ball_.offsetWidth) {
speedX = -speedX
}
if(y <= 0 || mainBox.offsetHeight - ball_.offsetHeight <= y) {
speedY = -speedY
}
//改變小球的left和top值
ball_.style.left = x + 'px';
ball_.style.top = y + 'px';
}
move();
</script>
</html>
獲取網(wǎng)頁文檔內(nèi)容大小的方法（包括溢出的內(nèi)容）
網(wǎng)頁上的每個(gè)元素還有scrollHeight和scrollWidth屬性山孔，指包含滾動(dòng)條在內(nèi)的該元素的視覺面積。
那么荷憋，document對(duì)象的scrollHeight和scrollWidth屬性就是網(wǎng)頁的大小台颠，意思就是滾動(dòng)條滾過的所有長(zhǎng)度和寬度。
document.documentElement.scrollWidth
document.documentElement.scrollHeight
元素.scrollHeight 可以獲得元素內(nèi)容的實(shí)際高度勒庄，包括溢出的內(nèi)容串前。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
#test{
width: 100px;
height: 150px;
padding: 20px;
border: 1px solid red;
}
</style>
</head>
<!--可以去掉style="height: 2000px"觀察一下-->
<body>
<div id="test">
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</div>
<script>
console.log(document.documentElement.scrollWidth);
console.log(document.documentElement.scrollHeight);
var div = document.getElementById('test')
console.log(div.scrollWidth);
console.log(div.scrollHeight);
</script>
</body>
</html>
獲取網(wǎng)頁元素的絕對(duì)位置
網(wǎng)頁元素的絕對(duì)位置，指該元素的左上角相對(duì)于整張網(wǎng)頁左上角的坐標(biāo)实蔽。
這個(gè)絕對(duì)位置要通過計(jì)算才能得到荡碾。
首先，每個(gè)元素都有offsetTop和offsetLeft屬性局装，表示該元素的左上角與父容器（offsetParent對(duì)象）左上角的距離坛吁。所以劳殖，只需要將這兩個(gè)值進(jìn)行累加，就可以得到該元素的絕對(duì)坐標(biāo)拨脉。
下面兩個(gè)函數(shù)可以用來獲取絕對(duì)位置的橫坐標(biāo)和縱坐標(biāo)哆姻。
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
body的offsetTop是0；body的offsetParent是null
offsetLeft與style.left的區(qū)別
offsetLeft 獲取的是相對(duì)于父對(duì)象的左邊距
left 獲取或設(shè)置相對(duì)于 具有定位屬性(position定義為relative)的父對(duì)象 的左邊距
如果父div的position定義為relative,子div的position定義為absolute女坑，那么子div的style.left的值是相對(duì)于父div的值填具，
這同offsetLeft是相同的，區(qū)別在于：
- style.left 返回的是字符串匆骗，如28px劳景，offsetLeft返回的是數(shù)值28，如果需要對(duì)取得的值進(jìn)行計(jì)算碉就，
還用offsetLeft比較方便盟广。 - style.left是讀寫的，offsetLeft是只讀的瓮钥，所以要改變div的位置筋量，只能修改style.left。
- style.left的值需要事先定義碉熄，否則取到的值為空桨武。而且必須要定義在html里，我做過試驗(yàn)锈津，如果定義在
css里呀酸，style.left的值仍然 為空，這就是我剛開始碰到的問題琼梆，總是取不到style.left的值性誉。
offsetLeft則仍然能夠取到，無需事先定義div的位置茎杂。
獲取網(wǎng)頁元素的相對(duì)位置
網(wǎng)頁元素的相對(duì)位置错览，指該元素左上角相對(duì)于瀏覽器窗口左上角的坐標(biāo)。
有了絕對(duì)位置以后煌往，獲得相對(duì)位置就很容易了倾哺，只要將絕對(duì)坐標(biāo)減去頁面的滾動(dòng)條滾動(dòng)的距離就可以了。滾動(dòng)條滾動(dòng)的垂直距離刽脖，是document對(duì)象的scrollTop屬性悼粮；滾動(dòng)條滾動(dòng)的水平距離是document對(duì)象的scrollLeft屬性。
滾動(dòng)距離
document.body.scrollTop/scrollLeft
scrollTop是可視區(qū)頂部到整個(gè)頁面頂部的距離（就是滾動(dòng)條滾動(dòng)距離）曾棕；想要得到誰的滾動(dòng)距離扣猫，scrollTop和scrollLeft的前面就寫哪個(gè)元素
document.documentElement.scrollTop/scrollLeft
兼容性問題
chrome瀏覽器，認(rèn)為滾動(dòng)距離是在body上的
其他瀏覽器翘地，認(rèn)為滾動(dòng)距離是documentElement上的
可以用如下方式解決兼容性問題：
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
對(duì)上一節(jié)中的兩個(gè)函數(shù)進(jìn)行相應(yīng)的改寫,獲得元素的相對(duì)位置：
function getElementViewLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
return actualLeft-scrollLeft ;
}
function getElementViewTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current. offsetTop;
current = current.offsetParent;
}
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
return actualTop-scrollTop;
}
js實(shí)現(xiàn)返回頂部功能
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
body {
height: 5000px;
}
a {
position: fixed;
right: 100px;
width: 50px;
height: 50px;
background: red;
color: white;
text-align: center;
line-height: 50px;
display: block;
}
.toTop {
bottom: 160px;
}
.toBottom {
bottom: 100px;
}
</style>
<script>
window.onload = function() {
var oA = document.getElementsByTagName('a');
oA[0].onclick = function() {
toScroll("top")
}
oA[1].onclick = function() {
toScroll("bottom")
}
}
function toScroll(target) {
clearInterval(this.timer)
var scrollHeight = document.body.offsetHeight - document.documentElement.clientHeight;
this.timer = setInterval(function() {
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
switch (target) {
case 'top':
console.log(scrolltop);
//把內(nèi)容滾動(dòng)指定的像素?cái)?shù)（第一個(gè)參數(shù)向右滾動(dòng)的像素?cái)?shù)申尤，第二個(gè)參數(shù)向下滾動(dòng)的像素?cái)?shù)）
window.scrollBy(0, -100);
if (Math.ceil(scrolltop) <= 0) {
clearInterval(this.timer)
};
break;
case 'bottom':
console.log(scrolltop);
window.scrollBy(0, 100);
if (Math.ceil(scrolltop) >= scrollHeight) {
clearInterval(this.timer)
};
break;
}
}, 30)
}
</script>
</head>
<body>
<a href="javascript:;" class="toTop">上</a>
<a href="javascript:;" class="toBottom">下</a>
</body>
</html>
獲取元素相對(duì)位置的快速方法
除了上面的函數(shù)以外癌幕，還有一種快速方法，可以立刻獲得網(wǎng)頁元素的位置昧穿。
那就是使用getBoundingClientRect()方法勺远。它返回一個(gè)對(duì)象，其中包含了left时鸵、right胶逢、top、bottom四個(gè)屬性饰潜，分別對(duì)應(yīng)了該元素的左上角和右下角相對(duì)于瀏覽器窗口（viewport）左上角的距離初坠。
所以，網(wǎng)頁元素的相對(duì)位置就是
var X= 元素.getBoundingClientRect().left;
var Y =元素.getBoundingClientRect().top;
再加上滾動(dòng)距離彭雾，就可以得到絕對(duì)位置
var X=元素.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =元素.getBoundingClientRect().top+document.documentElement.scrollTop;
