jQuery的CSS屬性名稱不一致

Question

爲什麼屬性名稱不同：

$(elem).css('padding-top') 

和

$(elem).css('marginTop') 

？它不應該是：

$(elem).css('margin-top') 

改爲？

Answer 1

您可以使用「camelCase」或「連字符分隔」形式的屬性。兩者都可以工作。請參閱jQuery docs for .css()：

jQuery可以同樣解釋多字屬性的CSS和DOM格式。例如，jQuery可以理解並返回.css('background-color')和.css('backgroundColor')的正確值。

所以用你的例子，以下所有的將工作：

$(elem).css('marginTop') 
$(elem).css('margin-top') 
$(elem).css('paddingTop') 
$(elem).css('padding-top') 

Answer 2

有兩件事。如何CSS看到它，以及如何使用JavaScript訪問它。在CSS中，它是：

#element {margin-top: ...;} 

而在JavaScript中，它是：

document.getElementById('element').style.marginTop 

並傳遞給css()功能起作用的是，無論是JavaScript的方式和CSS的方式。