3.1 Window
BOM = Browser Object Model,中文即「瀏覽器物件模型」。
在 practice 資料夾下,建立 window.html
來練習。
認識 window 物件
打開 Google 頁面(或任何網站都可),在 console 中,輸入 window 物件。如下圖:
有龐大的函式、物件等可以使用。例如簡單常用的:
完整的寫法,是:
window.alert("popup 訊息");
window 視窗寬高
下圖以高度(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>