View Full Version : Appling .style to DOM element before window.onload

08-02-2006, 03:29 AM
Hi, I am wanting to write some unobtrusive JS that will modify an element. I've been pulling my hair out so far!

Basically, I want to be able to modify an elements style before the page renders, so that I don't get a 'flash' of unstyled content. I thought brothercake's DOM-Ready watcher would do the trick.. but no dice..

Here is an HTML page with my example... the text is shown as black for a sec before changing to red.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="JavaScript" type="text/javascript">
//DOM-ready watcher
function domFunction(f, a)
//initialise the counter
var n = 0;

//start the timer
var t = setInterval(function()
//continue flag indicates whether to continue to the next iteration
//assume that we are going unless specified otherwise
var c = true;

//increase the counter

//if DOM methods are supported, and the body element exists
//(using a double-check including document.body, for the benefit of older moz builds [eg ns7.1]
//in which getElementsByTagName('body')[0] is undefined, unless this script is in the body section)
if(typeof document.getElementsByTagName != 'undefined' && (document.getElementsByTagName('body')[0] != null || document.body != null))
//set the continue flag to false
//because other things being equal, we're not going to continue
c = false;

//but ... if the arguments object is there
if(typeof a == 'object')
//iterate through the object
for(var i in a)
//if its value is "id" and the element with the given ID doesn't exist
//or its value is "tag" and the specified collection has no members
(a[i] == 'id' && document.getElementById(i) == null)
(a[i] == 'tag' && document.getElementsByTagName(i).length < 1)
//set the continue flag back to true
//because a specific element or collection doesn't exist
c = true;

//no need to finish this loop

//if we're not continuing
//we can call the argument function and clear the timer
if(!c) { f(); clearInterval(t); }

//if the timer has reached 60 (so timeout after 15 seconds)
//in practise, I've never seen this take longer than 7 iterations [in kde 3
//in second place was IE6, which takes 2 or 3 iterations roughly 5% of the time]
if(n >= 60)
//clear the timer

}, 250);

//Just before window.onload do this

var foobar = new domFunction(function()
if (document.getElementById('test')) {
document.getElementById('test').style.color = '#F00';

<div id="test">

08-02-2006, 04:36 AM
So... why can't you just use a normal stylesheet?

08-02-2006, 05:10 AM
Here is an example...

I have a page with an image I want to fade in (with JS).

If I set the image opacity to 0 with a stylesheet, and then fade it in with JS it works great.

However.. what happens when someone comes to my site without JS enabled? They see nothing...

No good..

08-02-2006, 06:03 AM
Doing something like this in the head appears to work

<script>document.write('<link href="javascript.css" rel="stylesheet" type="text/css" />');</script>

08-02-2006, 06:42 AM
Keep in mind that document.write() can not be used if you server your XHTML document with an XML mime-type.

08-02-2006, 10:52 PM
So you would get round that by doing a createElement etc?

08-02-2006, 10:58 PM
Yes. I'm not sure which browsers will allow you to append a new child element of <head> before onload though.

Maybe I'll make a test case for this later, because it's something that I would find useful to know.