HTML and CSS Reference
In-Depth Information
Exploring Object Properties
At the end of the last session, you used the id and value properties to extract the values
of the id and value attributes from <input> tags for the three Web page buttons. Most
HTML attributes can be accessed as properties of document objects. For example, setting
the src attribute in the img element
<img id=”logoImg” src=”logo.jpg” />
is equivalent to setting the src property using the following JavaScript command:
document.images[“logoImg”].src = “logo.jpg”;
The object properties that mirror HTML attributes follow certain conventions. The first
is that all properties must begin with a lowercase letter. If the HTML attribute consists
of multiple words, then the initial word is lowercase, but the first letter of each subse-
quent word is an uppercase letter—a format known as camel case . For example, the
maxlength attribute
<input type=”text” id=”fName” maxlength=”15” />
from an input element in an HTML document is expressed in camel case as follows:
document.getElementById(“fName”).maxLength = 15;
If the name of the HTML attribute is a reserved JavaScript name or keyword, the cor-
responding JavaScript property is often prefaced with the text string html . Thus, the for
attribute in the label element
<label id=”fLabel” for=”fName”> … </label>
is mirrored by the following JavaScript statement:
document.getElementById(“fLabel”).htmlFor = “fName”;
One exception to this convention is the class attribute. Because the class name is
reserved by JavaScript for other purposes, references to the HTML class attribute use the
className property. Thus, the HTML code that sets the value of the class attribute
<div id=”menu1” class=”menu”>
would have the following equivalent JavaScript expression:
document.getElementById(“menu1”).className = “menu”;
Once you are comfortable with these conventions, you can easily transfer your knowl-
edge of HTML elements and attributes to their equivalent JavaScript expressions involv-
ing object names and properties. Also, because the document object model mirrors the
HTML code, you can modify the attribute values of most HTML elements through your
JavaScript programs.
The only properties you cannot change are the read-only properties , which have fixed
values. One such property is the appVersion property of the navigator object, which
identifies the Web browser version currently in use. As disappointing as it might be, you
cannot upgrade your browser by simply running a JavaScript command to change the
value of the appVersion property!
The className property
and the class attribute
are not limited to single
values. Both the property
and the attribute can store
a space-separated list
of class names to assign
more than one class to the
same object or element.
Object Properties and CSS Styles
Because you can set inline styles using the style attribute, CSS styles also can be set in
the document object model through the use of the JavaScript style property
object .style. property
Search WWH ::

Custom Search