Click Here

PC Magazine

  PC Tech

JavaScript- Powered Stylesheets

Introduction

Setting the Stage

Building Blocks

Getting Dynamic

A Site for All Seasons

Figure 1: Setting style rules for IE and Navigator.

Figure 2: Customizing a Web site based on window size.

Figure 3: Creating a Web site for all seasons.



X10.com - The SuperSite for Home Automation!

Click Here!

 
  Categories
World Wide Web

JavaScript-Powered Stylesheets
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
Server-Side JavaScript -- PC Tech
DHTML That Works in Both IE and Navigator -- PC Tech
JavaScript -- DevHead
ScriptHead Archive -- DevHead
 
JavaScript Programming Courses -- ZDU

 
 SPONSORED LINKS
QUANTUM  Storage solutions to count on 24 hours/day, CLICK HERE
Sprint  FrameRelay: See why users rate Sprint #1 for frame relay
Beyond.com  Click here for free software!
Software  X10.com -- The SuperSite for Home Automation
Books  Buy a gift for MOM, a book from barnesandnoble.com
 ZDNET FEATURED LINKS
Freebies!  The latest FREE files - yours to download and keep!
Shop Smart  Compare prices on over 7,000 computer products & save
Contest  Win a Diamond MP3 Rio from ZDNet Auctions!
 MAGAZINE OFFERS
Free Issue  Get a risk-free issue of RED HERRING magazine today!

TOP
Copyright (c) 1999 Ziff-Davis Inc.