JavaScript 動態調整圖片尺寸：必須先設置 style 屬性才能生效

問題代碼

function bigger() {
    var p = document.getElementById('image');
    p.width++;  // 無效
    p.height++;
}

點擊按鈕調用後圖片尺寸不變。

原因

width/height 屬性只反映 HTML 標籤屬性或 CSS 內聯樣式，若圖片初始未設置 style="width:...;height:..."，則 p.style.width 為空字符串，直接 ++ 無效。

正確寫法

function bigger() {
    var p = document.getElementById('image');
    // 解析當前樣式值，默認 0
    var w = parseInt(p.style.width) || 0;
    var h = parseInt(p.style.height) || 0;
    p.style.width = (w + 1) + 'px';
    p.style.height = (h + 1) + 'px';
}

最佳實踐

在 HTML 中預設內聯樣式：<img id="image" src="..." style="width:100px;height:100px;">，或通過 CSS 類初始化尺寸。