vue 获取元素在浏览器的位置_前端开发JS获取页面元素的位置
1.網(wǎng)頁的大小和瀏覽器窗口的大小
一張網(wǎng)頁的全部面積，就是它的大小。通常情況下，網(wǎng)頁的大小由內(nèi)容和
document元素的clientHeight和clientWidth屬性，就代表了網(wǎng)頁的大小。
function getViewport(){
if (document.compatMode == “BackCompat”){
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
上面的getViewport函數(shù)就可以返回瀏覽器窗口的高和寬。使用的時(shí)候，有三個(gè)地方需要注意：
1)這個(gè)函數(shù)必須在頁面加載完成后才能運(yùn)行，否則document對象還沒生成，瀏覽器會(huì)報(bào)錯(cuò)。
2)大多數(shù)情況下，都是document.documentElement.clientWidth返回正確值。但是，在IE6的quirks模式中，document.body.clientWidth返回正確的值，因此函數(shù)中加入了對文檔模式的判斷。
3)clientWidth和clientHeight都是只讀屬性，不能對它們賦值。
3.獲取網(wǎng)頁大小的另一種方法
網(wǎng)頁上的每個(gè)元素還有scrollHeight和scrollWidth屬性，指包含滾動(dòng)條在內(nèi)的該元素的視覺面積。
那么，document對象的scrollHeight和scrollWidth屬性就是網(wǎng)頁的大小，意思就是滾動(dòng)條滾過的所有長度和寬度。
仿照getViewport()函數(shù)，可以寫出getPagearea()函數(shù)。
function getPagearea(){
if (document.compatMode == “BackCompat”){
return {
width: document.body.scrollWidth,
height: document.body.scrollHeight
}
} else {
return {
width: document.documentElement.scrollWidth,
height: document.documentElement.scrollHeight
}
}
}
這個(gè)函數(shù)有一個(gè)問題。如果網(wǎng)頁內(nèi)容能夠在瀏覽器窗口中全部顯示，不出現(xiàn)滾動(dòng)條，那么網(wǎng)頁的clientWidth和scrollWidth應(yīng)該相等。但是實(shí)際上，不同瀏覽器有不同的處理，這兩個(gè)值未必相等。所以，我們需要取它們之中較大的那個(gè)值，因此要對getPagearea()函數(shù)進(jìn)行改寫。
function getPagearea(){
if (document.compatMode == “BackCompat”){
return {
width: Math.max(document.body.scrollWidth,
document.body.clientWidth),
height: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} else {
return {
width: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
4.獲取網(wǎng)頁元素的絕對位置
網(wǎng)頁元素的絕對位置，指該元素的左上角相對于整張網(wǎng)頁左上角的坐標(biāo)。這個(gè)絕對位置要通過計(jì)算才能得到。
首先，每個(gè)元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器(offsetParent對象)左上角的距離。所以，只需要將這兩個(gè)值進(jìn)行累加，就可以得到該元素的絕對坐標(biāo)。
5.獲取網(wǎng)頁元素的相對位置
網(wǎng)頁元素的相對位置，指該元素左上角相對于瀏覽器窗口左上角的坐標(biāo)。
有了絕對位置以后，獲得相對位置就很容易了，只要將絕對坐標(biāo)減去頁面的滾動(dòng)條滾動(dòng)的距離就可以了。滾動(dòng)條滾動(dòng)的垂直距離，是document對象的scrollTop屬性；滾動(dòng)條滾動(dòng)的水平距離是document對象的scrollLeft屬性。
scrollTop和scrollLeft屬性是可以賦值的，并且會(huì)立即自動(dòng)滾動(dòng)網(wǎng)頁到相應(yīng)位置，因此可以利用它們改變網(wǎng)頁元素的相對位置。另外，element.scrollIntoView()方法也有類似作用，可以使網(wǎng)頁元素出現(xiàn)在瀏覽器窗口的左上角。
6.獲取元素位置的快速方法
除了上面的函數(shù)以外，還有一種快速方法，可以立刻獲得網(wǎng)頁元素的位置。
那就是使用getBoundingClientRect()方法。它返回一個(gè)對象，其中包含了left、right、top、bottom四個(gè)屬性，分別對應(yīng)了該元素的左上角和右下角相對于瀏覽器窗口(viewport)左上角的距離。
所以，網(wǎng)頁元素的相對位置就是
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
再加上滾動(dòng)距離，就可以得到絕對位置
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
目前，IE、Firefox 3.0+、Opera 9.5+都支持該方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。
java前端開發(fā)和后端開發(fā)都有哪些|前端開發(fā)跟java比那個(gè)更好|
總結(jié)
以上是生活随笔為你收集整理的vue 获取元素在浏览器的位置_前端开发JS获取页面元素的位置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 修改pytho2安装插件的位置_offi
- 下一篇： 扣税是怎么扣的 扣税是如何扣的