Professional JavaScript | 24 | WebReference

Professional JavaScript | 24


Professional JavaScript

Creating Internet Explorer Behaviors
Where Netscape innovates styles with JSSS, Microsoft innovates styles with behaviors. A behavior is a way of attaching some script to a style, and therefore to all the HTML tags of a given web page that adopt that style. This is done by storing the script in a specially formatted, separate file called a .HTC file (for HTml Component). In this respect, behaviors are an approach that is similar to using the <SCRIPT SRC=> tag and attribute, but there the similarity ends. Although events haven't been covered yet, it doesn't take too much imagination to see that there ought to be ways that JavaScript scripts can run when the user clicks on elements in a web page. Behaviors let styled-up tags run such scripts.

Here is a simple HTML document using an Internet Explorer 5.0 behavior:

 No response here
 <DIV CLASS=help DELAY=2000> Click me for help </DIV>
 No response here
The behavior is defined in line 3 in the STYLE block. It is activated if the user interacts with the <DIV> tag. Here is a very simple .HTC file:
<script language="JScript">
attachEvent("onclick", event_onclick);
function event_onclick()
  alert("Sorry, you're beyond help");
If the user clicks on the middle line, then the function in the .HTC file attached to the event runs, displaying a simple alert box (a window) with a message.

This behavior feature has advantages and drawbacks. Its advantage is that it stops the HTML web page from being littered with bits of JavaScript, which aids comprehension, and it saves you from having to duplicate JavaScript event handlers all over the place for like items in a web page, which saves effort. Its drawbacks are that if you use many behaviors, then you must draw many .HTC files over the Web into your browser, and that's slow. So slow, that you might have to wait some time before the behaviors are ready to be used. The magic DELAY attribute in the above example tells Internet Explorer "wait this long before displaying this tag, a behavior will probably be loaded by then". It could require some fairly complex code to be absolutely sure all the behaviors have loaded.

The .HTC file can be begun with some XML markup that associates events from the browser without having to use the attachEvent() function as shown here. This URL gives a fuller introduction:

Manipulating Styles

In order for JavaScript to be able to do anything with style sheets apart from specifying them, two things need to be possible: the style details need to be readable, and the style needs to be changeable by JavaScript. In both 3.0 browsers, it is not possible to read or write style attributes outside the style definition. This means styles are both static (unchanging) and invisible to JavaScript.

In Netscape 4.0 browsers, styles can be changed. Additionally, if the style includes a position property of absolute or relative, then the style appears as a JavaScript Layer object. This has read/write properties matching all the CSS-1 positioning properties, which let scripts manipulate a style's location, size, visibility and stacking order in the document. The actual display of the HTML element or layer identified by the style is still static. This means that if a style is changed via JavaScript, any HTML elements already displayed won't automatically change to match the new values – the browser just doesn't give you that much control. The document that the element is a part of would have to be reloaded first (which might reset the changes anyway). The sole exception to this rule is the background color or image for an 'absolutely' or 'relatively' positioned style. In that case, you can change the background color at any time you like.

Internet Explorer 4.0 has an innovation called dynamic styles. Dynamic styles means that styles are fully exposed as host objects that JavaScript can manipulate after they are created and after the HTML document is displayed in the browser as well. Styles created with the <STYLE> tag and styles created with the HTML STYLE= attribute are accessible as JavaScript objects. This gives all the functionality of Navigator 4.0 layers, plus the ability to change all the other style properties. A change to one of these properties via JavaScript can result in parts of the document being re-examined and redrawn differently by the browser ('reflowed').

See Chapter 8 on Dynamic HTML for further discussion on manipulating styles from JavaScript.

and Created: February 12, 2001
Revised: March 5, 2001