what's the difference background-color and backgroundColor?

Question

what's the difference background-color and backgroundColor? i can see the result is the same. however, which one should I use for best practice? Thanks.

Answer 1

The CSS property is called background-color. This is what you should use in a stylesheet. You can also use uppercase letters because CSS is case-insensitive, but there needs to be an hyphen.

#element {
  background-color: red;
}

If you want to get or set that property using JavaScript, you can then use

element.style.getPropertyValue("background-color");
element.style.setProperty("background-color", "red");
element.style.setPropertyValue("background-color", "red");

However, it would be more convenient to be able to access it as a JS property. The problem is that the hyphen would be treated as a subtraction. To address that, the CSSStyleDeclaration interface is extended by partial interfaces in order to allow to get or set the values of supported CSS properties using IDL camel-case attributes.

That means you can also use

element.style.backgroundColor = "red";
element.style["backgroundColor"] = "red";

Answer 2

backgroundColor is used by javascript to apply an inline style to an element. For example document.body.style.backgroundColor = "red"; will result in an inline style on an element style="background-color: red;". So the end result is the same, but backgroundColor is the JS value that translates to background-color in CSS