bgColor not updating via JavaScript

Question

Why does the background color of the div not update?

Tagger.prototype.mouseDown = function(event) {
  this.element.style.posLeft = event.clientX;
  this.element.style.width = 200 + "px";
  this.element.style.height = 200 + "px";
  this.element.style.position = "absolute";
  this.element.style.zIndex = 10;
  this.element.style.bgColor = "yellow";
  console.log(this.element);
  console.log(this.element.style.bgColor);
}

The console output is:

<div id="tagbox4" class="tagbox" style="width: 200px; height: 200px; position: absolute; z-index: 10;">
yellow

I can select the div by inspecting the element in the browser, but it has no background color, even though the console says it is "yellow".

Answer 1

It is not bgColor, that is an old outdated way of setting background colors when CSS was not popular.

You want to set the CSS property background-color. When you set it with JavaScript, you remove the dash and use camelCase. So you want to set backgroundColor.

this.element.style.backgroundColor