BOM (browers object model) 瀏覽器對象模型
BOM?五大對象
????????-?window?JS?在瀏覽器中的頂層對象,var?和?function?聲明的全局函數(shù)都是掛載window的屬性中
????????-?navigator?瀏覽器相關(guān)信息?(瀏覽器型號蓬推、版本妆棒、系統(tǒng)版本、網(wǎng)絡(luò)信息等)
????????-?location?地址欄信息?(hash沸伏、search糕珊、href)
????????-?history?歷史記錄?(go、back毅糟、forward)
????????-?screen?屏幕信息?(width红选、height)
獲取尺寸相應(yīng)方法
????-?獲取可視區(qū)尺寸
????????-?document.documentElement.clientWidth / document.documentElement.clientHeight
????????-?window.innerWidth 可視區(qū)寬度
? ? ? ? -?window.innerHeight 可視區(qū)高度
? ??-?獲取頁面尺寸
????????-?document.body.scrollWidth、document.body.scrollHeight
????????-?document.documentElement.offsetWidth姆另、document.documentElement.offsetHeight
????-?獲取屏幕尺寸
????????-?screen.width喇肋、screen.height
????-?元素相關(guān)尺寸
????????-?el.offsetWidth、el.offsetHeight?可視寬高(width/height?+?padding?+?border)
????????-?el.offsetLeft迹辐、el.offsetTop?元素距離可視父級的距離
????????-?el.clientWidth蝶防、el.clientHeight?元素寬高?(width/height?+?padding)
????????-?el.clientLeft、el.clientTop?元素的左/上邊框?qū)挾?/p>
????????-?el.scrollWidth明吩、el.scrollHeight?元素內(nèi)容寬高?(如果元素內(nèi)容寬/高度小于元素高度時间学,則是元素寬/高)
????????-?getBoundingClientRect()
????????????-?width、height?可視寬高(width/height?+?padding?+?border)
????????????-?top印荔、bottom?元素頂/底部距離可視區(qū)頂部距離
????????????-?left低葫、right?元素左/右部距離可視區(qū)頂部距離
scroll? ? 監(jiān)聽滾動條位置發(fā)生變化
滾動條位置獲取
????-?document.body.scrollTop||document.documentElement.scrollTop
????-?document.body.scrollLeft||document.documentElement.scrollLeft
????-?window.scrollY?獲取縱向滾動條位置
? ? -?window.scrollX?獲取橫向滾動條位置
? ? -?window.scrollTo(x,y);
scrollHeight
滾動條高度
open?方法
window.open(URL,target,specs,replace)??
1.URL?新窗口地址
2.target?屬性?新窗口打開方式
????????_blank
????????_self?
3.specs?新窗口規(guī)格
????????width=pixels??窗口的寬度.最小.值為100
????????height=pixels?窗口的高度。最小.值為100
????????location=yes|no|1|0?是否顯示地址字段.默認值是yes
????????menubar=yes|no|1|0??是否顯示菜單欄.默認值是yes
????????resizable=yes|no|1|0??是否可調(diào)整窗口大小.默認值是yes
????????scrollbars=yes|no|1|0?是否顯示滾動條.默認值是yes
????????status=yes|no|1|0?是否要添加一個狀態(tài)欄.默認值是yes
????????titlebar=yes|no|1|0?是否顯示標題欄.被忽略躏鱼,除非調(diào)用HTML應(yīng)用程序或一個值得信賴的對話框.默認值是yes
????????toolbar=yes|no|1|0??是否顯示瀏覽器工具欄.默認值是yes
close?方法關(guān)閉窗口
window?下的各類彈窗
? ??????1.alert()
? ??????2.confirm('message')
? ??????3.prompt([msg],[defaultText])
居中廣告彈窗demo
? ??resize? ??監(jiān)聽窗口大小發(fā)生改變