Discovering DHTML in Netscape 6

DHTML

Discovering DHTML in Netscape 6, Part II of II (cont.)

Other Layer Tricks
The style collection makes it easy to manipulate other properties of a <DIV>. For example, to change the background color:

var myElement = document.getElementById("sampleDiv");
myElement.style.backgroundColor = "#ff0000";

You can just as easily assign a background image:

myElement.style.backgroundImage = "url('images/myImage.gif')";

Example: setting colors and images

Assigning borders is a snap with the various border properties:

myElement.style.borderColor="#000000";
myElement.style.borderStyle="solid";
myElement.style.borderWidth="2px";

You can use a wide array of border styles, including solid, inset, outset and groove, for 3D-style and beveled effects. It should be noted that neither NS6 nor IE5 place borders correctly. The W3C specification requires that borders surround the outside of the box. IE5 places the borders on the inside, taking up space in the content area. NS6 fares much worse by adding the border widths to the overall width and height of the <DIV> without re-clipping (you'll see this in the demo below). Both approaches are wrong, and hopefully will be resolved in a future release.

Example: different border styles

Both NS6 and IE support an innerHTML property, which lets you modify the HTML content of a layer. The innerHTML property is not part of any W3C standard. Microsoft introduced it as a proprietary feature of Internet Explorer, but the feature was considered useful enough that the Mozilla development group adopted it, and thus it is also part of NS6.

The innerHTML property accepts and returns a string. The browser parses any HTML markup into objects which you can then access like any other elements:

var myElement = document.getElementById("sampleDiv");
myElement.innerHTML = "This is the HTML content!";

Example: getting and setting content with innerHTML

IE compatibility note:

Although NS6 supports innerHTML on all container elements, it does not support the related IE property outerHTML nor the insertAdjacentHTML method.

You've seen some powerful techniques for handling DHTML in NS6, such as accessing page elements via DOM methods and manipulating them with JavaScript. You've also seen how to use an element's style properties to dynamically change its visibility, position, size and other attributes. Not only are these techniques easy to implement, they're also compatible with Internet Explorer 5, which greatly reduces the amount of cross-browser coding needed. Hopefully, this trend towards standardization between browsers will continue in the future, until perhaps one day browser-specific DHTML will become nothing but a bad memory.

Discuss this article in the web.dhtml.scripting discussion group!

Scott Andrew LePera LePera is a UI Developer at 2Bridge Software in San Francisco, where he specializes in DHTML interface components. You can read his musings on DHTML, standards and the state of the Web at his site, http://www.scottandrew.com. Contact him at scott@scottandrew.com.

Send comments to feedback@devx.com.

¹Sizing

²Clipping

³Other Layer Tricks

Back

Back to beginning:

Resources
• W3C DOM Specification • W3C CSS Specification • Netscape 6 Transition Information • Web Standards Project
DevX Links • Get Help with DHTML • web.dhtml.general

Sponsored Links

Jupitermedia Corporation has four divisions:
JupiterWeb, JupiterResearch, JupiterEvents, and JupiterImages

Jupitermedia Corporate Info | Newsletters | Tech Jobs | E-mail Offers