![]() |
![]() ![]() |
|
Setting the Stage Continued from Introduction Version 4.0 or later of Internet Explorer and Netscape Navigator support traditional stylesheets and JavaScript-powered stylesheets. Traditional stylesheets use predefined style rules to control the layout and appearance of elements in Web pages. To change the appearance of text in paragraphs, you can make a style rule for the tag, such as the following rule that sets blue text on a yellow background: p {color: blue; background-color: yellow}; Style rules like this one are made in the document header using the style element and normally affect all paragraph elements in the document. On the other hand, if you only want the style rule to apply to a single element, you can assign style rules within the body of a document. You do this with an inline style notation such as: <p style="color: blue; background-color: yellow">Hello World</p> JavaScript-powered stylesheets build on the concept of header-defined and inline stylesheets, but a few twists are needed for cross-browser compatibility. IE supports dynamically assigned style rules as long as there is a header-defined style element available with a unique identifier. Via JavaScript, you can add rules to this style element by referencing its unique identifier. Navigator 4.0 supports script-based modification of stylesheets, but only from script elements defined in the header. If you don't specify style rules in the header, the page must be reloaded for any style changes to be visible. Following these requirements, you can set up your code to accommodate both browsers as shown here: <head> <!--Insert an empty style assignment with ID for IE 4.0--> <style id="ssA" type="text/css"></style> <!--Insert script in header for NN 4.0--> <script language="JavaScript"> <!-- //Insert dynamic style assignments //here. Both IE and NN will use //these rules. //--> </script> </head> When you get into advanced scripting, however, you may actually need to create header-defined scripts for Navigator and body-defined scripts for IE. In IE, some key properties needed for dynamic customization are available only from within the document body. Next: Building Blocks Published as Internet Builder in the 5/4/99 issue of PC Magazine. Related Links |
|
TOP | ![]() Copyright (c) 1999 Ziff-Davis Inc. |