OK, we’ve been delving into Cascading Style Sheets for the last few weeks, so let’s get down and let’s get dynamic with CSS. And to do this we need to enter the world of dynamic HTML (DHTML) – essentially HTML manipulated by JavaScript, VBScript or any other browser scripting language.
OK, we’ve been delving into Cascading Style Sheets for the last few weeks, so let’s get down and let’s get dynamic with CSS. And to do this we need to enter the world of dynamic HTML (DHTML) – essentially HTML manipulated by JavaScript, VBScript or any other browser scripting language.
Before we dive into that topic, we need to extend the concept of HTML tags to include tags that have no properties. The reason this matters is that all standard HTML tags come with a property set. But those properties will affect the presentation, and you probably don’t want to have to go to the trouble of redefining them. To get around this problem there are two special tags:
The division tag,
and
do not. Try saving the following in a file and then loading it into your browser:This is line one
This is line two
This is line five
Note that And like any other tags, span.nothing { ... } ... DHTML is not a standard; it is a marketing term that Netscape coined and Microsoft adopted to describe some new features of its browsers from Version 4 onward. Of course, there is a consequence of this being a marketing term: You can kiss compatibility goodbye. Well, you can kiss complete compatibility goodbye, as there is significant commonality between the implementations - most things you want to do with DHTML will work in either browser. But the devil is in the details . . . and in the bugs in the browsers (which are problems that are not just cross-vendor but cross-version as well - but what did you expect?). Underpinning DHTML is the document object model (DOM), a map of the contents of a Web page. The DOM is a schema that provides a way of identifying the components that make up a given Web page starting from the root object and decomposing into sub-objects. At the root of the DOM is the browser window named (no surprise) window, and any element must start with the object window. So to get to the elements in a document displayed in a browser, we refer to a path that begins "window.document" although just "document" is usually used. So let's say you have a button defined such as: This image is a named element under the images objects branch of the DOM, and you would refer to it as window.document.images.pic1 or document.images.pic1. Changing this element with JavaScript is as simple as this: This means you can dynamically change the properties of an on-screen element under IE4+ and NS6+. Moreover, under IE4+ and NS4+ you can hide or show elements, change the Z-index (the depth of elements on screen), control the position of elements, move elements on screen and let users move screen elements. And for IE5+ and NS4+, you can change the clipping of an object - the amount of the object that is displayed. As you might guess, there are many differences between the DOMs of Microsoft, Netscape and other browser vendors. For example, below the window object under Internet Explorer and Netscape browsers are the object's document, history and location. Then the browser's DOMs part ways: The Netscape DOM also has frames at this level, while Microsoft's DOM includes toolbar, packages and navigator. For the purposes of manipulating content though, we are concerned only with the document branch of the DOM, and here is where standards exist, which we'll discuss next week. Styled comments to gearhead@gibbs.com.
does not have an associated end tag (), but both do. This means both tags define a region of a document but , which was added in HTML 4.0, is even cleaner because it doesn't cause a line break. can have IDs and classes assigned to them. For example:#something { ... }
document.images.pic1.src="pic1state2.gif"
