font-weight和fontWeight的區別？

今天發現通過JS來設置一個元素的CSS樣式，代碼如下所示:

var js = document.getElementById("test-p");
js.style["font-weight"] = "bold";


之後發現一個很奇怪的地方。。我們通過三種方式輸出

console.log(js.style.fontWeight);
console.log(js.style["font-weight"]);
console.log(js.style["fontWeight"]);


都可以在控制台輸出之前設置的bold，或者是我們之前設置

js.style.fontWeight = "bold";


就算我們是在CSS裡面直接設置

{font-weight: bold};


也可以用上面三個方式在控制台輸出設置的bold。

如果直接

console.log(js.style);


輸出的這個對象中沒有發現"font-weight"這個屬性，只有"fontWeight"，如下圖所示，請問一下各位大大，這是為什麼，為什麼我們這裡的"font-weight"和"fontWeight"會出現這種"等價"的情況，新手表示完全弄懵了，謝謝解答的各位。

---

查了一下規範，有點長，我先貼一段（來自 CSS Object Model，聲明一下這段裡面有各種 attribute/property 我就統一偷懶說屬性了，分不清的話看原文）：

For each CSS property property that is a supported CSS property, the following partial interface applies where camel-cased attribute is obtained by running the CSS property to IDL attribute algorithm for property.

partial interface CSSStyleDeclaration { [TreatNullAs=EmptyString] attribute DOMString _camel_cased_attributeCSS Object Model (CSSOM);
};


The camel-cased attribute attribute, on getting, must return the result of invoking getPropertyValue()with the argument being the result of running the IDL attribute to CSS property algorithm for camel-cased attribute.

Setting the camel-cased attribute attribute must invoke setProperty() with the first argument being the result of running the IDL attribute to CSS property algorithm for camel-cased attribute, as second argument the given value, and no third argument. Any exceptions thrown must be re-thrown.

# For example, for the font-size property there would be a fontSize IDL attribute.

For each CSS property property that is a supported CSS property, except for properties that have no "-" (U+002D) in the property name, the following partial interface applies where dashed attribute is property.

partial interface CSSStyleDeclaration { [TreatNullAs=EmptyString] attribute DOMString _dashed_attributeCSS Object Model (CSSOM);
};


The dashed attribute attribute, on getting, must return the result of invoking getPropertyValue() with the argument being dashed attribute.

Setting the dashed attribute attribute must invoke setProperty() with the first argument being dashed attribute, as second argument the given value, and no third argument. Any exceptions thrown must be re-thrown.

# For example, for the font-size property there would be a font-size IDL attribute. In JavaScript, the property can be accessed as follows, assuming element is an HTML element:

element.style["font-size"];


The CSS property to IDL attribute algorithm for property is as follows:

1. Let output be the empty string.
2. Let uppercase next be unset.
3. For each character c in property:
   1. If c is "-" (U+002D), let uppercase next be set.
   2. Otherwise, if uppercase next is set, let uppercase next be unset and append c converted to ASCII uppercase to output.
   3. Otherwise, append c to output.
4. Return output.

The IDL attribute to CSS property algorithm for attribute is as follows:

1. Let output be the empty string.
2. For each character c in attribute:
   1. If c is in the range U+0041 to U+005A (ASCII uppercase), append "-" (U+002D) followed byc converted to ASCII lowercase to output.
   2. Otherwise, append c to output.
3. Return output.

DOM 元素的 style 屬性對應了一個 CSSStyleDeclaration 對象。CSSStyleDeclaration 的介面描述中規定了，對於當前瀏覽器支持的每個 CSS 屬性都會通過一個方式映射到這個介面上的一個 IDL 屬性。簡單地說來，就是 font-weight 會對應到 elem.style.fontWeight 上。同時，每個 CSS 屬性也會映射到一個 dash 分隔的 IDL 屬性上。並且這兩類屬性的值是同步的，而且規範也給出了屬性名互相轉換的格式。

Chrome 下面通過訪問這兩種 IDL 屬性的形式都可以得到對應 CSS 屬性的值，但是 dash 分隔的屬性無法遍歷出來，可能是 Chrome 做了特殊處理吧。Firefox 下是兩種屬性都顯示的（Firefox 下返回的是 CSS2Properties 對象，規範說該介面是 CSSStyleDeclaration 的一個擴展介面，具體的差異還沒來得及看）。

---

如果在DOM中用font-weight會產生歧義，瀏覽器將理解為font的字元減去weight的字元，所以規定使用駝峰命名法fontWeight。或者用[]這個。因此，沒有區別。剛在圖書館看到這個內容，太巧了！

---

css與js的命名規則不一樣,css中的xx-xx和js中的xxXx意思一樣

---

js屬性如果用了減號會導致點不出來，影響使用，所以全改駝峰了。

---

實測，第一個寫法是不行的，js.style["font-weight"] = "bold";這個並沒有導致前台的樣式起作用，也許是當成自定義屬性處理了吧！當然……俺是小白+菜。等大神來解答吧……我只是路過一下！

---

推薦閱讀：