Changing Element Styles

Dynamic HTML allows you to write script that can change the HTML attributes that modify a given element. These attributes can be things such as the SRC attribute on an IMG or IFRAME element, or the STYLE attribute for a DIV element. This document shows you how to change the SRC= attribute on an IFRAME element so that the contents of IFRAME change on the fly. The same example also shows you how to change the background color of the body for the SRC= document of the IFRAME. The next set of examples shows how to change the class name of the element so that it is associated with a different style sheet.

Dynamic HTML gives you scriptable access to all HTML elements, attributes, and CSS styles. You as the author can use these techniques to design some pretty cool DHTML Web pages.

Changing the Style of an IFRAME

The following example shows how to change the contents of IFRAME as well as change the style attribute of the BODY element of the contained IFRAME. Click the Show Me button to show the page, and then look at the code.

<HTML>
<HEAD><TITLE>Changing Element Attributes</TITLE>
<SCRIPT LANGUAGE="JavaScript">
 function change_image() {
   document.all.myiframe.src="frame_content2.htm";  
   //use the all collection to access attributes of the IFRAME element
}
function change_background() {
     document.frames.myiframe.document.body.style.backgroundColor="green";   
     // use the frames collection to access the document contained in the IFRAME.
}
</SCRIPT>
</HEAD>
<BODY>
    <IFRAME id=myiframe src="frame_content.htm">
    </IFRAME>
    <BUTTON onclick=change_image()>Change contents of the IFRAME</BUTTON>
    <BUTTON onclick=change_background()>Change the background color of the IFRAME</BUTTON>
</BODY>
</HTML>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Changing Element Classes

There are two primary ways to change the inline style for an element—either change the element's STYLE attribute, or change the className of the element to match a defined class in a global style sheet. The following example shows how straightforward it is to change the inline STYLE attribute with an event.

<H1 id=myStyle onclick="this.style.color=blue">This text will change to blue when clicked </H1>

This changes the property "color" of the style sub-object for the H1 element.

However, to change the style for more than one element, use global style sheets, which let you define styles based on a "contextual selector." Styles can apply to tag names, element identifiers, or all elements in a class. The DHTML class attribute on every element lets you associate any element with any class name. This way, multiple elements can belong to a single class, and setting a global style for a class means that the style sheet applies to every element with that class name.

Because the class attribute can be scripted, you can dynamically change class associations with elements in a document, as in the following example.

<HTML>
<HEAD><TITLE>Changing Element Attributes</TITLE>
<STYLE>
.textRed {color:red}
.textBlue {color:blue}
</STYLE>
</HEAD>
<BODY>
<H1 class=textBlue onmouseover="this.className='textRed'"
    onmouseout="this.className='textBlue'">
Mouse over this text to see the color change from blue to red and back to blue
</H1>
</BODY>
</HTML>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

In the example, global rules are defined for two classes, textRed and "textBlue. The H1 initially is a part of the textBlue class and therefore is displayed in blue. Moving the mouse over the text fires the onmouseover event, and the inline event handler changes the association of the H1 element to the textRed class, which renders the text red. Note that the class attribute is referenced through the className property.

Note The scriptable properties for CSS styles are all read/write except position. You cannot dynamically set a nonpositioned element to be positioned. If you want to absolutely position an element using an event handler script, be sure that the element has its initial position set to relative using either a global style sheet or an inline style.

Scripting CSS Attributes

All style attributes are strings. Several properties have been added to the style object to help manipulate values as nonstrings. For example, pixelHeight is an integer so that the height of an object can be mathematically manipulated in base pixel units regardless of how the height attribute was set. The posHeight property is an integer that describes the height attribute in the units to which the author originally set the CSS height attribute.

If a style property represents some number of units, you can include a units designator when assigning the value. The pt (points) and px (pixels) designators are used in the following examples.

document.all.MyElement.style.fontSize = "24pt";
document.all.MyElement.style.fontSize = "120px";

If you don't supply a units designator, the default unit of measure for the property is used. One benefit of this is that you can assign a number or the result of an expression (rather than a string) and it will be converted automatically. For example, the assignments below are the same—they both set the font size to 72 pixels.

document.all.MyElement.style.fontSize = "72";
document.all.MyElement.style.fontSize = 72;