資訊專欄INFORMATION COLUMN
摘要：獲取各種寬高位置先上總結(jié)，再細(xì)細(xì)道來總結(jié)獲取屏幕寬高總區(qū)域可用區(qū)域有些手機(jī)存在底部任務(wù)欄，一般直接用第一個(gè)就獲取瀏覽器寬高獲取瀏覽器位置獲取頁面寬高方法方法移動(dòng)端，一般用就了獲取寬高內(nèi)部寬高，不包滾動(dòng)條和整體寬高滾動(dòng)條含被隱藏的內(nèi)部
js 獲取各種寬高+位置
-- 先上總結(jié)，再細(xì)細(xì)道來
總結(jié)
獲取屏幕寬高
window.screen.width / window.screen.height //總區(qū)域
window.screen.availWidth / window.screen.availHeight//可用區(qū)域
//有些手機(jī)存在底部任務(wù)欄，一般直接用第一個(gè)就ok
獲取瀏覽器寬高
width = window.outerWidth
height = window.outerHeight
獲取瀏覽器位置
left = window.screenX || window.screenLeft
top = window.screenY || window.screenTop
獲取頁面寬高
(方法1)
width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth
height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight
(方法2)
function getPageSize(){
var page = document.documentElement
?document.documentElement
:document.body,
gcr = page.getbBoundingClientRect()
return {
width:Math.abs(gcr.right-gcr.left)
height:Math.abs(gcr.bottom-gcr.top)
}
}
(移動(dòng)端，一般用inner就ok了)
width = window.innerWidth
height = window.innerHeight
獲取element寬高
1、內(nèi)部寬高client(padding+content，不包滾動(dòng)條和border)
width = elment.clientWidth
height = elment.clientHeight
2、整體寬高offset(padding+content+border+滾動(dòng)條)
width = elment.offsetWidth
height = elment.offsetHeight
3、含被overflow隱藏的內(nèi)部寬高scroll（無滾動(dòng)條時(shí)同1、client）
width = elment.scrollWidth
height = elment.scrollHeight
4、內(nèi)容寬高getBoundingClientRect(只包含content)
size = element.getBoundingClientRect().width / height
ie8-不支持width / height可運(yùn)用right-left/bottom-top解決
獲取element位置
offsetParent:設(shè)有position值為absolute或relative的最近的上級(jí)元素
1、相對(duì)父元素(offsetParent)左上角定位
left = element.offsetLeft
top = element.offsetTop
2、相對(duì)視口左上角定位
position=element.getBoundingClientRect().left/right/top/bottom
//在ie下調(diào)試時(shí)，加上onscroll動(dòng)態(tài)監(jiān)聽scrollTop數(shù)據(jù)才會(huì)正常刷新
獲取滾動(dòng)條位置
1、獲取element對(duì)象滾動(dòng)條位置
scrollTop = element.scrollTop
2、獲取window滾動(dòng)條位置兼容性方法
scrollTop = window.scrollY
|| window.pageYOffset
|| (document.documentElement.scrollTop===0
?document.body.scrollTop
:document.documentElement.scrollTop
);
//在ie下調(diào)試時(shí)，加上onscroll動(dòng)態(tài)監(jiān)聽scrollTop數(shù)據(jù)才會(huì)正常刷新
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92471.html
摘要：前言這篇文章主要介紹了有關(guān)瀏覽器中獲取坐標(biāo)以及尺寸的幾種途徑算是比較全的一篇文章了在瀏覽器中獲取元素的坐標(biāo)以及尺寸是非常容易的有非常多種方式來完成這些需求但是雜亂的和很多兼容處理導(dǎo)致了瀏覽器中沒有直接的方式來獲取我們想要的結(jié)果仔細(xì)想想這個(gè)問 前言 這篇文章主要介紹了有關(guān)瀏覽器中獲取坐標(biāo)以及尺寸的幾種途徑,算是比較全的一篇文章了. 在瀏覽器中獲取元素的坐標(biāo)以及尺寸是非常容易的,有非常多種...
摘要：和這一對(duì)屬性是用來讀取元素的的寬度和高度的。第二部分對(duì)象在中，對(duì)于元素的運(yùn)動(dòng)的操作通常都會(huì)涉及到對(duì)象，而對(duì)象也存在很多位置屬性，且由于瀏覽器兼容性問題會(huì)導(dǎo)致這些屬性間相互混淆，這里一一講解。文章轉(zhuǎn)自中的各種寬高以及位置總結(jié) 在javascript中操作dom節(jié)點(diǎn)讓其運(yùn)動(dòng)的時(shí)候，常常會(huì)涉及到各種寬高以及位置坐標(biāo)等概念，如果不能很好地理解這些屬性所代表的意義，就不能理解js的運(yùn)動(dòng)原理，同時(shí)...
摘要：包括和屬性是可以賦值的，并且會(huì)立即自動(dòng)滾動(dòng)網(wǎng)頁到相應(yīng)位置，因此可以利用它們改變網(wǎng)頁元素的相對(duì)位置。另外，方法也有類似作用，可以使網(wǎng)頁元素出現(xiàn)在瀏覽器窗口的左上角。網(wǎng)頁元素的位置那就是使用方法。就是透過瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。 獲取網(wǎng)頁的大小 一張網(wǎng)頁的全部面積，就是它的大小，通常是由內(nèi)容和css樣式表決定的。瀏覽器窗口的大小，是在瀏覽器中看到的那部分網(wǎng)頁面積。又叫做viewport...
摘要：之前項(xiàng)目剛寫了個(gè)判斷觸底自動(dòng)加載更多的功能，發(fā)現(xiàn)自己對(duì)各種寬高的定義還是很模糊。嗯，就這樣過程中還是有很大收獲的 之前項(xiàng)目剛寫了個(gè)判斷觸底自動(dòng)加載更多的功能，發(fā)現(xiàn)自己對(duì)各種寬、高的定義還是很模糊。終于沒有偷懶，寫了個(gè)demo理解了一下。網(wǎng)上也有很多整理好的文章，為了加強(qiáng)下自身記憶，順便也許能給些建議。 element的一些寬、高屬性注：盒子模型： content+padding+mar...
閱讀 1464·2023-04-25 17:18
閱讀 1894·2021-10-27 14:18
閱讀 2135·2021-09-09 09:33
閱讀 1852·2019-08-30 15:55
閱讀 2025·2019-08-30 15:53
閱讀 3449·2019-08-29 16:17
閱讀 3436·2019-08-26 13:57
閱讀 1739·2019-08-26 13:46
