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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
SaaS Tool Offers Custom Database Development
Microsoft’s Automated Agent: Can We Talk?
Borland Finally Sells CodeGear
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:



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape?
Microsoft Article: 7.0, Microsoft's Lucky Version?
Microsoft Article: Hyper-V--The Killer Feature in Windows Server 2008
Avaya Article: How to Feed Data into the Avaya Event Processor
Microsoft Article: Install What You Need with Windows Server 2008
HP eBook: Putting the Green into IT
Whitepaper: HP Integrated Citrix XenServer for HP ProLiant Servers
Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 1
Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 2--The Future of Concurrency
Avaya Article: Setting Up a SIP A/S Development Environment
IBM Article: How Cool Is Your Data Center?
Microsoft Article: Managing Virtual Machines with Microsoft System Center
HP eBook: Storage Networking , Part 1
Microsoft Article: Solving Data Center Complexity with Microsoft System Center Configuration Manager 2007
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Intel Video: Are Multi-core Processors Here to Stay?
On-Demand Webcast: Five Virtualization Trends to Watch
HP Video: Page Cost Calculator
Intel Video: APIs for Parallel Programming
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
Microsoft Silverlight Video: Creating Fading Controls with Expression Design and Expression Blend 2
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Sun Download: Solaris 8 Migration Assistant
Sybase Download: SQL Anywhere Developer Edition
Red Gate Download: SQL Backup Pro and free DBA Best Practices eBook
Red Gate Download: SQL Compare Pro 6
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
How-to-Article: Preparing for Hyper-Threading Technology and Dual Core Technology
eTouch PDF: Conquering the Tyranny of E-Mail and Word Processors
IBM Article: Collaborating in the High-Performance Workplace
HP Demo: StorageWorks EVA4400
Intel Featured Algorhythm: Intel Threading Building Blocks--The Pipeline Class
Microsoft How-to Article: Get Going with Silverlight and Windows Live
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
How to Create an Ajax Autocomplete Text Field: Part 6 · Software Engineering for Ajax · Perl Pragma Primer
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Using File Virtualization for Disaster Recovery · VoIP Security: SIP—Versatile but Vulnerable · Around the World in 80 Nodes