從JavaScript訪問元素的CSS樣式屬性的正確方法是什么？

Question

以下JavaScript代碼可在基於WebKit的瀏覽器中完美運行，但不適用於Firefox：

canvas.style['left'] = "50%";
canvas.style['margin-left'] = "-" + (width / 2) + "px";

在Firefox中檢查該元素，我可以看到上述代碼已成功設置了left屬性，但由於某種原因該元素沒有margin-left屬性。

看來我一定做錯了，這並不奇怪，因為我無法弄清楚從JavaScript訪問（讀取或設置）CSS樣式屬性的正確方法是什么。 我剛剛找到了一些使用此表示法的示例，並嘗試按照這些結果進行混合。

從JavaScript訪問元素的CSS樣式屬性的正確/符合標准的方法是什么？

Answer 1

經過大量的梳理后，我發掘了以下基本事實，這些事實對於大多數JavaScript人士而言無疑是輕而易舉的事，但是我想我的困惑在JavaScript初學者中並不罕見。

• JavaScript中的所有對象都是關聯數組。

可以通過以下兩種方式之一訪問對象屬性：

var o = new Object();
o.prop = "A string";
o['prop']; // => "A string"

雖然可以將對象用作“常規”關聯數組，並使用具有任意字符串的鍵：

o.['another-prop'] = 4 // Perfectly valid

為此，您將創建一個無法通過點符號訪問的屬性：

o.another-prop // Parsed as `o.another` minus `prop`

大概是因為以下原因：

• 從JavaScript訪問時，DOM樣式屬性使用camelCase。

我正在使用CSS中使用的帶連字符的屬性名稱。 這些在我測試過的所有基於WebKit的瀏覽器中都有效，但這似乎只是因為WebKit寬容了。

---

據我所知，從JavaScript訪問CSS樣式屬性的正確方法是將屬性名稱轉換為駝峰式大小寫，然后使用點表示法或帶括號的關聯數組表示法。 在Firefox中無效的行變為

canvas.style['marginLeft'] = "-" + (width / 2) + "px";

要么

canvas.style.marginLeft = "-" + (width / 2) + "px";

這對我測試過的所有瀏覽器都適用，但是如果我說的內容不正確或與標准不符，我很想聽聽。

Answer 2

用大寫字母刪除短划線和下一個單詞，從margin-left到marginLeft等

  obj.style.marginLeft = '10px';