alternateStyles.js is a Javascript object, which once implemented allows the users of a website to switch styles (within the limits set by the developer) on each element of a xhtml document.

Examples

These examples don’t really show off the potential of alternateStyles.js, however they are commonly used around the web.

• Text size (body: font-size).
• Contrast (body: font-color).

Dependencies

alternateStyles.js has one main dependency, it requires a document.getElementsBySelector() method present. Rather then reinvent the wheel I’d recommend using Simon Willison’s getElementsBySelector

FAQ

How does this differ from Alternate Style Sheets? Alternative Style: Working With Alternate Style Sheets is a great example of ‘Alternate Style Sheets’, which definitely has it’s place. They differ because ‘Alternate Style Sheets’ is exactly that, an alternate style sheet, while alternateStyles.js changes styles on DOM Elements. You could use the two together.

But what about browser compatibility

Tested and working in:

• Mozilla Firefox 1 & 1.5
• Opera 8
• Konqueror 3.4.3
• Safari 2
• Internet Explorer 5.01, 5.5, 6 on Windows

All “modern browsers” should be supported. However, in the off-chance that one of your users browsers isn’t supported there’s no reason for alternateStyles.js to break your current website.