Js操作BOM物件模型的詳細介紹

我們知道，BOM是可以對瀏覽器窗口進行訪問和操作的，我們使用BOM一般都是作為移動窗口，改變狀態欄的文本或者是執行其他與頁面內容不直接相關的動作。

window物件:

1.視窗操作

#其中moveTo,moveBy是視窗的移動,resizeTo,resizeBo是設定視窗的大小,scrollTo ,scrollBy是設定捲軸每次捲動的位置.

開啟和關閉新視窗:

openBtn.onclick = function() {
    newWindow = window.open("./test.html", "_blank", "width=300px, height=300px, left=500px, top=300px, toolbar=no")
};
closeBtn.onclick = function() {
    newWindow.window.close();
};

時間間隔和暫停:

##時間間隔:

setInterval

暫停:

 window.clearInterval

#範例:

start.onclick = function() {
    // 3. 设置定时器
    times = setInterval(function() {
       window.scrollBy(0, 5);
    }, 40);
};
stop.onclick = function() {
    //4. 清除定时器
    window.clearInterval(times);
};

setTimeOut:只在時間間隔後執行一次動作

下面附上一個倒數計時的範例:

歷史記錄:

history.go()

括號中的參數可以是1,-1

history.go(1)表示前进一页.相当于history.forward()
history.go(-1)表示后退一页,相当于history.back()
location:

location物件表示載入視窗的URL,此外,他還可以解析URL

#1.hash:傳回URL中#之後的部分

2.host:傳回伺服器的名字

3.href:目前載入頁面完整的URL

4.search:執行GET請求的URL中的問號後面的部分

location對象有一個reload方法:可重新載入目前頁面(刷新).

reload為false,從快取中載入,reload為true,從伺服器端載入,省略參數,預設為false

#screen物件:

window.screen.availWidth+" "+window.screen.availheight    (視窗可以事情的螢幕的寬度和高度)

window. screen.Width+" "+window.screen.height  (螢幕的寬度和高度)

確定新視窗的大小時,availHeight和availWidth屬性非常有用

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關讀取：
CSS3中transform屬性怎麼使用

如何用CSS3屬性選擇器取代JS的作用

怎麼使用css3製作進度條

#######

以上是Js操作BOM物件模型的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！