spacer
Yehuda Shiran August 17, 2000
Dynamic Style Evolution
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
ActiveState Debuts Open Source Business Suite
Salesforce Offers Visual App Builder
Codesion Steps Out From CVS's Shadow

The introduction of Cascading Style Sheets (CSS) in versions 3.0 of both Internet Explorer and Netscape Navigator revolutionized the way Web authors wrote their pages. CSS allows authors to do work differently. First, instead of mixing content and style in one document, authors can now separate between content and its formatting instructions which go into the style sheet. Secondly, authors do not have to repeat formatting instructions for every instance of the same element type, because CSS allows them to specify styles for generic types.

Internet Explorer 4.0 and Netscape Navigator 4.0 brought the second revolution. No longer need styles stay fixed while reading the page. These browsers provide the ability to dynamically change any HTML attribute of any element, any time. Attributes can be modified by a JavaScript script, in response to certain events such as the user moving the mouse over the target element. Internet Explorer 4.0 implemented the style specifications as an element property (style) which is in itself an object. The style object's properties include all the style attributes such as colors, fonts, spacing, indentation, position, and text's visibility. To change the appearance of an element on the page, you simply change the corresponding property of the style object. You may also change a direct attribute of an HTML element. For example, you can switch the image of an IMG element, by setting its SRC attribute to a different GIF file.

Internet Explorer 5 and later supports dynamic properties, which allow Web authors to assign elements, properties, and formulas to DHTML properties. Dynamic properties are set by the setExpression() method. You can force recalculation of all expressions by calling the recalc() method. Learn more about dynamic properties in Column 65, Dynamic Properties. Sometimes, you want to be notified when a dynamic property changes. Elements fire the propertyChange event (handled by the onPropertyChange() event handler) when either an object, an expando, or an object's style changes. (expando is a property of the document object and it can be either retrieved or set. When set to true, new properties can be added to objects. When set to false, no new properties can be added to objects.) Use the onPropertyChange() event handler and the currentStyle object to respond to changes throughout a document.

Learn more about the subject in Column 66, Dynamic Styles.


People who read this tip also read these tips:

Look for similar tips by subject:


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Use Web Caching to Make Your Web Site Faster · Creating an Online Shopping Cart Mechanism in PHP · Log JavaScript Errors Using an AJAX-driven Web Service
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Configuring Granular Settings for a Database Level Audit · The Perils of a Web 2.0 Transition on Your Business Processes · Facebook Redesigns Site —Again — Nears 400M Mark