3.1 Window

Previous3. 瀏覽器物件模型 (BOM)Next3.2 Location

Last updated 1 year ago

3.1 Window

BOM = Browser Object Model，中文即「瀏覽器物件模型」。

在 practice 資料夾下，建立 window.html 來練習。

認識 window 物件

打開 Google 頁面(或任何網站都可)，在 console 中，輸入 window 物件。如下圖：

有龐大的函式、物件等可以使用。例如簡單常用的：

alert("popup 訊息");

完整的寫法，是：

window.alert("popup 訊息");

window 視窗寬高

window.innerWidth
window.outerWidth
window.innerHeight
window.outerHeight

下圖以高度(Height)為例(寬度同理)：

編輯 window.html，完整內容如下，執行看看：

<!DOCTYPE html>
<html lang="zh-Hant" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

  </head>
  <body>
    <button type="button" id="btn">按鈕</button>
    
    <!-- script 寫在 body 的結束標籤之前 -->
    <script>
      var btn = document.getElementById("btn");
      btn.addEventListener("click", function(){
        console.log("視窗的 innerWidth：" + window.innerWidth);
        console.log("視窗的 outerWidth：" + window.outerWidth);
        console.log("視窗的 innerHeight：" + window.innerHeight);
        console.log("視窗的 outerHeight：" + window.outerHeight);
      });
    </script>
  </body>
</html>

Previous3. 瀏覽器物件模型 (BOM)Next3.2 Location

Last updated 1 year ago