BOM操作-1:innerWidth、innerHeight可視區(qū)寬度高度 / scroll滾動條 / open、close打開關(guān)閉 / alert()等彈窗 / resize窗口大小改變

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?是否顯示地址字段.默認(rèn)值是yes

????????menubar=yes|no|1|0??是否顯示菜單欄.默認(rèn)值是yes

????????resizable=yes|no|1|0??是否可調(diào)整窗口大小.默認(rèn)值是yes

????????scrollbars=yes|no|1|0?是否顯示滾動條.默認(rèn)值是yes

????????status=yes|no|1|0?是否要添加一個狀態(tài)欄.默認(rèn)值是yes

????????titlebar=yes|no|1|0?是否顯示標(biāo)題欄.被忽略,除非調(diào)用HTML應(yīng)用程序或一個值得信賴的對話框.默認(rèn)值是yes

????????toolbar=yes|no|1|0??是否顯示瀏覽器工具欄.默認(rèn)值是yes

close?方法關(guān)閉窗口


window?下的各類彈窗

? ??????1.alert()

? ??????2.confirm('message')

? ??????3.prompt([msg],[defaultText])


居中廣告彈窗demo

? ??resize? ??監(jiān)聽窗口大小發(fā)生改變


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 選擇題部分 1.(),只有在發(fā)生短路事故時或者在負(fù)荷電流較大時,變流器中才會有足夠的二次電流作為繼電保護(hù)跳閘之用。...
    skystarwuwei閱讀 14,380評論 0 7
  • 概述 在瀏覽器中,window對象(注意,w為小寫)指當(dāng)前的瀏覽器窗口。它也是所有對象的頂層對象。 “頂層對象”指...
    許先生__閱讀 1,794評論 0 6
  • 選擇題部分 1.()部門負(fù)責(zé)日常監(jiān)督檢查工作,安全巡視的同時進(jìn)行消防檢查,推動消防安全制度的貫徹落實(shí)。 A: 消防...
    skystarwuwei閱讀 15,943評論 0 3
  • from:http://fp-moon.iteye.com/blog/1426956JavaScript模態(tài)窗口和...
    enshunyan閱讀 2,503評論 0 0
  • 廢話不多說,直接上干貨 ---------------------------------------------...
    小小趙紙農(nóng)閱讀 3,668評論 0 15

友情鏈接更多精彩內(nèi)容