JavaScript Tutorials: Mapping JavaScript Properties to HTML Attributes

By: Dusty Arlia
Published on Monday, August 11, 2014 at 9:02 PM
Last Updated on Saturday, July 11, 2015 at 7:46 PM
Total Updates: 3

JavaScript properties most of the time map directly to HTML attributes. Keep in mind that HTML attributes are case insensitive while JavaScript properties are case sensitive. Always use lowercase letters for your JavaScript properties. If there are multiple words in the property name, use camelcase with the first letter being lowercase. There are a few HTML attributes that are JavaScript keywords. For these these words, prefix the JavaScript property name with html. The one exception to these rules is the JavaScript className property.

Most HTML attributes have a string value which corresponds to its string JavaScript property value, but these values can also be booleans (e.g. defaultChecked), numbers (e.g. maxLength), or function objects (e.g. onclick; or null).

There are some special cases:

- The HTML5 specification defines a few attributes (e.g. form) that convert element IDs to Element objects

- The value of the style attribute on any HTML element is a CSSStyleDeclaration object, not a string