Firefox 獲取 borderWidth 樣式兼容性問題解析

問題現象

使用 getComputedStyle(elem, false)['borderWidth'] 在 Firefox 中回傳異常值（如 medium 或空字串），而在 IE/Chrome 正常回傳像素值（如 "2px"）。

根本原因

borderWidth 是 簡寫屬性（Shorthand Property）。CSSOM 規範規定：getComputedStyle 對簡寫屬性的回傳值 未標準化，各瀏覽器實現不同：

• Chrome/Edge：回傳四邊相同則回傳單一值（如 "2px"），不同則回傳空字串。
• Firefox：回傳關鍵字 medium、thin、thick 或空字串。
• 舊版 IE：currentStyle['borderWidth'] 回傳像素值。

正確解法：查詢長屬性

改用具體方向的長屬性，確保跨瀏覽器一致回傳 "2px" 格式：

function getBorderWidth(elem, side) {
    // side: 'Top' | 'Right' | 'Bottom' | 'Left'
    const prop = 'border' + side + 'Width';
    if (window.getComputedStyle) {
        return getComputedStyle(elem, null)[prop];
    } else if (elem.currentStyle) { // IE8-
        return elem.currentStyle[prop];
    }
    return '0px';
}

// 使用範例
const leftWidth = getBorderWidth(div, 'Left'); // 回傳 "2px"

動畫庫中的處理建議

原代碼嘗試對 borderWidth 做動畫（startMove(this,'borderWidth',14)）。建議：

1. 動畫目標改為四個長屬性同時變化。
2. 或僅動畫 borderLeftWidth 等單邊，視覺效果相近但可控。
3. 解析數值時用 parseFloat(getBorderWidth(...)) 取得數字。

驗證代碼片段

<div id="div4" style="border: 2px solid red; width:100px; height:100px;"></div>
<script>
function getStyle(obj, name) {
    if (obj.currentStyle) return obj.currentStyle[name];
    return getComputedStyle(obj, false)[name];
}
window.onload = function() {
    const d = document.getElementById('div4');
    console.log('borderWidth (shorthand):', getStyle(d, 'borderWidth')); // Firefox: "medium"
    console.log('borderLeftWidth (longhand):', getStyle(d, 'borderLeftWidth')); // 所有瀏覽器: "2px"
};
</script>

結語

CSS 簡寫屬性在 getComputedStyle 中行為不可靠。開發動畫、樣式讀取工具時，務必使用長屬性（如 borderLeftWidth、marginTop、paddingRight）以保證跨瀏覽器一致性。