Question

in HTML

<td colspan=3 style='background-color:pink;' >hello world</td>

but in Javascript / DOM

var td = document.createElement('td');
td.colSpan = 3;
td.style.backgroundColor = 'pink';

is there a mapping of HTML properties and styles to Javascript/DOM attributes and styles?

understand about camelBack for CSS style

have some HTML specifications, eg, colspan=3, and implementing them with Javascript. so need a mapping between HTML property name and DOM property names.

---

ok, here’s a mapping for the abnormal properties. those with a 1::1 mapping and functions are omitted.

html2dom = {
  acceptcharset: 'acceptCharset',
  accesskey: 'accessKey',
  bgcolor: 'bgColor',
  cellindex: 'cellIndex',
  cellpadding: 'cellPadding',
  cellspacing: 'cellSpacing',
  choff: 'chOff',
  class: 'className',
  codebase: 'codeBase',
  codetype: 'codeType',
  colspan: 'colSpan',
  datetime: 'dateTime',
  checked: 'defaultChecked',
  selected: 'defaultSelected',
  value: 'defaultValue',
  frameborder: 'frameBorder',
  httpequiv: 'httpEquiv',
  longdesc: 'longDesc',
  marginheight: 'marginHeight',
  marginwidth: 'marginWidth',
  maxlength: 'maxLength',
  nohref: 'noHref',
  noresize: 'noResize',
  noshade: 'noShade',
  nowrap: 'noWrap',
  readonly: 'readOnly',
  rowindex: 'rowIndex',
  rowspan: 'rowSpan',
  sectionrowindex: 'sectionRowIndex',
  selectedindex: 'selectedIndex',
  tabindex: 'tabIndex',
  tbodies: 'tBodies',
  tfoot: 'tFoot',
  thead: 'tHead',
  url: 'URL',
  usemap: 'useMap',
  valign: 'vAlign',
  valuetype: 'valueType' };

Answer 1

The DOM IDL exposes different HTML attributes differently for convenience and consistency. That is, COLSPAN -> colSpan and CLASS -> className. (Remember that HTML attributes are not case-sensitive by virtue of being case-normalized while DOM properties are.)

Since all standard HTML attributes are listed in the appropriate DOM IDL – which is the authoritative source – then a mapping can be generated off of the supplied definitions. Other documentation may need to be consulted for vendor-specific or not-yet-codified attributes.

The 1.1.3 Naming Conventions says:

While it would be nice to have attribute and method names that are short, informative, internally consistent, and familiar to users of similar APIs, the names also should not clash with the names in legacy APIs supported by DOM implementations. Furthermore, both OMG IDL and ECMAScript have significant limitations in their ability to disambiguate names from different namespaces that make it difficult to avoid naming conflicts with short, familiar names. So, DOM names tend to be long and descriptive in order to be unique across all environments.

That is, while the DOM attempts to pair well with HTML (and XML), it favors internal consistency and universal use.

---

The original premise of the question was incorrect because background-color is not an HTML attribute. It is a CSS property that is exposed in the DOM via elm.style.backgroundColor (see Jospehn Siber’s answer for the mapping).

Because background-color is not an HTML attribute it cannot be compared with HTML attributes such as colspan or class.