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
