前言
整理傳統 JavaScript (DOM Level 0/1) 常用事件屬性、方法、BOM 物件屬性與 CSS 樣式操作，適用於維護舊專案或快速原型開發。現代專案建議使用 addEventListener、querySelector、classList 等標準 API。
一、事件處理
| 類別 | 屬性/方法 | 說明 |
|---|
| 元素事件 | onclick / ondblclick | 單擊 / 雙擊 |
| onmousedown / onmouseup | 按下 / 釋放滑鼠鍵 |
| onmouseover / onmouseout | 滑鼠進入 / 離開元素 |
| onmousemove | 滑鼠移動 |
| onkeydown / onkeyup / onkeypress | 鍵盤按下 / 釋放 / 字元輸入 |
| onfocus / onblur | 獲得 / 失去焦點 |
| onchange | 表單值改變並失去焦點 |
| onselect | 文字被選取 |
| 視窗/文件事件 | onload | 頁面資源載入完成 (僅 <body>) |
| onunload | 頁面卸載/離開 (僅 <body>) |
| onresize | 視窗大小改變 |
| onscroll | 捲軸捲動 |
| 表單事件 | onsubmit | 提交前驗證，return false 可阻止提交 |
| 事件物件 | event.clientX / clientY | 滑鼠相對視窗座標 |
| event.offsetX / offsetY | 滑鼠相對事件源元素座標 |
| event.button | 1=左鍵, 2=右鍵, 3=雙鍵同時 (IE 模型) |
二、BOM 核心物件
| 物件 | 常用屬性/方法 | 說明 |
|---|
| window | open(url, name, features), close(), focus(), blur(), moveTo(x,y), resizeTo(w,h), scroll(x,y), setTimeout/Interval, clearTimeout/Interval | 頂層物件 |
| location | href, reload(), replace(), assign() | URL 操作 |
| history | back(), forward(), go(n), length | 瀏覽歷程 |
| navigator | appName, appVersion, userAgent, platform | 瀏覽器資訊 |
| screen | width, height, availWidth, availHeight, colorDepth | 螢幕解析度 |
| document | title, bgColor, fgColor, linkColor, vlinkColor, alinkColor, write(), writeln(), forms[], links[], anchors[], images[], getElementById(), getElementsByTagName() | 文件樹根 |
三、常用字串與數學方法
// String
str.charAt(index) // 指定位置字元
str.indexOf(substr) // 從左尋找, 找不到 -1
str.lastIndexOf(substr) // 從右尋找
str.substring(start, end) // 擷取子字串 [start, end)
str.toLowerCase() / toUpperCase()
str.split(separator) // 切割成陣列
// Math
Math.random() // 0 ~ 1 隨機數
Math.floor(x) // 向下取整
Math.ceil(x) // 向上取整
Math.round(x) // 四捨五入
Math.min/max(a,b) // 最小/最大值
// Date
var d = new Date();
d.getFullYear() // 4 位數年
d.getMonth() // 0-11 月
d.getDate() // 1-31 日
d.getDay() // 0-6 週日-週六
d.getHours() // 0-23 時
d.getMinutes() // 0-59 分
d.getSeconds() // 0-59 秒
d.getTime() // 1970 毫秒數
d.toLocaleString() // 本地化字串
四、CSS 樣式動態操作 (element.style.property)
| 屬性 | JS 屬性名 | 範例值 |
|---|
| 字型大小 | fontSize | "14px", "1.2em", "12pt" |
| 字型家族 | fontFamily | "Arial, sans-serif" |
| 顏色 | color | "#ff0000", "rgb(255,0,0)" |
| 背景色 | backgroundColor | "#ffffcc" |
| 背景圖片 | backgroundImage | "url('bg.png')" |
| 粗體 | fontWeight | "bold", "normal", "700" |
| 斜體 | fontStyle | "italic", "normal" |
| 文字裝飾 | textDecoration | "underline", "line-through", "none" |
| 字母間距 | letterSpacing | "2px" |
| 顯示/隱藏 | display | "block", "none", "inline-block" |
| 可見性 | visibility | "visible", "hidden" |
| 定位 | position, left, top, zIndex | "absolute", "100px", "999" |
| 邊框 | border, borderWidth, borderStyle, borderColor | "1px solid red", "dashed", "2px" |
| 游標 | cursor | "pointer", "wait", "text", "crosshair", "help", "move", "n-resize" |
五、IE 專有視覺濾鏡
// 僅 IE 支援，現代瀏覽器請用 CSS3 filter/transform
element.style.filter = "glow(color=red, strength=5)"; // 發光
element.style.filter = "fliph()"; // 水平翻轉
element.style.filter = "flipv()"; // 垂直翻轉
element.style.filter = "blur(add=1, direction=45, strength=3)"; // 模糊
element.style.filter = "alpha(opacity=50, finishopacity=0, style=1)"; // 漸變透明
element.style.filter = "chroma(color=#ffffff)"; // 指定顏色透明
element.style.filter = "dropshadow(color=gray, offx=3, offy=3)"; // 陰影
element.style.filter = "gray()"; // 灰階
element.style.filter = "invert()"; // 負片
element.style.filter = "light()"; // 高光
element.style.filter = "mask(color=#000000)"; // 蒙版
element.style.filter = "wave(freq=2, strength=10, lightstrength=20, phase=0)"; // 波浪
六、常用游標樣式關鍵字
auto, default, pointer, crosshair, text, wait, help,
move, n-resize, ne-resize, e-resize, se-resize,
s-resize, sw-resize, w-resize, nw-resize,
progress, not-allowed, no-drop, context-menu, cell, vertical-text, alias, copy, none
七、邊框樣式關鍵字
none, hidden, dotted, dashed, solid, double,
groove, ridge, inset, outset
