Reading and Changing Properties
A property describes a characteristic of an object. For example, an IMG object has width and height properties, which define the image's dimensions, and the src property, which specifies the graphics source file that the IMG object should display. In Internet Explorer, virtually all properties can be both read and manipulated through script. Code Listing 7-1 provides an example of how this works. Figure 7-1 shows how this code is initially displayed; Figure 7-2 shows what happens after the user clicks OK.
NOTE
As of this writing, the Object Model found in Netscape Navigator is not as full featured as that in Internet Explorer. Because of this, Navigator (at least through version 4) will not display many of the samples in this chapter as expected, including Code Listing 7-1. Although Navigator does not let you access a particular image with the techniques shown in this listing, you can read (but not change) properties of an image by accessing it through the document object's image collection. Thus, instead of using Img1.width, as in Code Listing 7-1, you could use document.images[0].width. Chapter 24 demonstrates more techniques for accomplishing cross browser scripting.
Code Listing 7-1.
<HTML> <HEAD> <TITLE>Listing 7-1</TITLE> </HEAD> <BODY> <IMG ID="Img1" SRC="circle.gif"> <SCRIPT LANGUAGE="JavaScript"> alert("Img1 has width "+Img1.width+" and height "+Img1.height) Img1.height=150 Img1.width=30 alert("Now it has width "+Img1.width+" and height "+Img1.height) </SCRIPT> </BODY> </HTML> |
Figure 7-1. The dialog box indicates the width and the height of the image.
Figure 7-2. When the image changes, the dialog box indicates the new property values.
In this example, our HTML page contains an image object named Img1. The block of script first produces an Alert dialog box that displays the existing width and height of the image. To get these values, the script refers to the image's properties using dot notation, the naming scheme used in the Object Model. (See the sidebar "Notation and Naming" in "Reading and Changing Properties" below for more information.) Although the width and height properties can apply to many different objects, the expressions Img1.width and Img1.height in Code Listing 7-1 refer to the width and height properties of the Img1 object only. The plus signs that accompany these expressions in Code Listing 7-1 are not part of the naming convention. They simply serve to join, or concatenate, the pieces of text, enclosed in quotes, with the values of the named properties, resulting in the sentence displayed in the Alert dialog box. Next the script changes the values of Img1's width and height properties by setting them to new values. A dialog box displays the new width and height of the image, as shown in Figure 7-2.
In Internet Explorer, all HTML attributes have equivalent properties in the Object Model: the WIDTH attribute and the width property, the SIZE attribute and the size property, to name only two. But the Object Model contains many additional properties that are not available as attributes. This list provides a few examples of properties used in the Object Model:
| background | href |
| borderColor | innerHTML |
| cellPadding | pixelHeight |
| color | src |
| Display | tabIndex |
| fileCreatedDate | visibility |
| fontFamily | zIndex |
Appendix C contains a complete list of all the standard properties that Internet Explorer supports. Full descriptions of all the properties, including the objects they apply to, can be found on the SBN Workshop Web site and on the CD that accompanies this book. On the CD see Workshop (References); DHTML, HTML & CSS; DHTML References; Properties. To get to the online version, visit the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm, or open the file named MSDN_OL.htm on the companion CD, and choose DHTML Properties.
Although all properties are readable through script, not all of them are writable—that is, not all properties can be changed on the fly through script, as the width and height properties were changed in Code Listing 7-1. For instance, the IMG object's fileSize property describes the size of an image's source file in bytes. Because this property is based on a physical value that the browser cannot control (because it is not an image-editing program), changing it through script would not be meaningful. Additionally, different browsers are able to change different properties. Internet Explorer versions 4 and later are able to change the way many aspects of the elements are displayed, such as the width of an image already on the page. Internet Explorer versions 3 and earlier and all currently released versions of Netscape Navigator are unable to change most such properties.
NOTE
Internet Explorer 5 allows you to monitor changes to an object's properties. This is accomplished through the new onpropertychange event and the propertyName property of the event object. Events and event handlers are covered in more depth later in this chapter.
Notation and NamingDot notation gives you a clear, convenient way to refer to objects and their components when you write scripts. In this naming convention, the name of an object and the name of its child object, property, event, method, or collection are separated by a dot (a period). For example, the expression window.document.linkColor refers to the linkColor property of the document object, which is a child object of the window object.
It is not always necessary to provide the full name when using dot notation. For instance, if your script code is acting on items that are in the same window, you can usually omit the name of the window object. Thus, document.linkColor refers to the linkColor property of the document in the current window.
Names are case sensitive in the Object Model when using JScript. To have items in the Object Model behave properly, your code must refer to them using the proper case—WINDOW.DOCUMENT.LINKCOLOR is not the same as window.document.linkColor. For instance, if we had tried to set the height property of Img1 in Code Listing 7-1 by writing Img1.HEIGHT, the height of the image would not have changed because the height property must be lowercased. As a general rule, you should lowercase the names of properties, methods, and collections if the names are single words (such as src or height) and use mixed case if the names consist of multiple words (such as fileSize or fileModifiedDate).
Creating Expando Properties
Internet Explorer 4 and later support a special class of properties referred to as expando properties. These are user-created properties that do not map to the intrinsic properties of an object. For example, the following line of script creates a new property of Img1; the new property is named AssociatedText, and its value is set to the words This book covers JScript.:
Img1.AssociatedText="This book covers JScript." |
You could use such a new property to associate information with a graphic; for instance, if Img1 were a picture of a book, this expando property could be a description of the book. Expando properties can be read or changed at any time. It is useful to follow a different naming convention when creating expando properties. For example, we capitalized the first letter of each word in the property. This makes it easier to keep track of which properties are expando and which are built-in.
