Move Javascript in Body Tag to CSS sheet

**aschecht** · 02-13-2008, 06:24 PM

I need to apply a javascript to the body tag of pages throughout my site as follows:

<body onload="highlight()";>

Can I do this instead with CSS to avoid including it in every body tag as follows:

Call a style sheet with

body
{
onload="highlight()";
}

and just use a regular <body> tag in every HTML page.

I tried it and it doesn't work. Is it supposed to or is this not possible? Then again, did I just do it wrong with bad syntax or something?

Andrew

**tripy** · 02-13-2008, 06:46 PM

It's not supposed to be done this way, thus it's not possible.
But you can do that with javascript.

If you want something portable, the best way is to put the onload definition in an external js file, that you include on every page.
Add a DOM call to register the onload function in it:

Code:

try{
  document.addEventListener(window,'load',onloadFunction);
}
catch(error){
  document.attachEvent(window,'onload',onloadFunction);
}

function onloadFunction(){
  //Do what you want here, it's called when the page is loaded....
}

With this, every page that include a reference to that .js file

HTML Code:

<!--Put this into the <head> element-->
<script type="text/javascript" src="/path_to_the_file/functions.js"></script>

will register the function "onloadFunction()" as the one to be called.

**aschecht** · 02-13-2008, 08:22 PM

That answers the question perfectly! Thanks.

A.

**willcode4beer** · 02-13-2008, 11:48 PM

Thierry gave you the right answer but...... it's not 100% correct.
Regardless of what you are about to read, DO FOLLOW Thierry's advice.

Internet Explorer supports a thing called behaviors. Behaviors are basically javascript files that are applied via CSS. THe primary use of behaviors is to fix broken/missing CSS in IE. Though, it is JS, so it can be used for evil. For an example, see my page on fixing the quote tag:
http://willcode4beer.com/tips.jsp?set=fixIEQuotes
For the most part, avoid behaviors.

Firefox and Opera also have some limited ability to apply javascript via CSS. The usage of this is very very narrow. Don't do it for general purpose scripts.

**tripy** · 02-14-2008, 04:48 AM

Quote:

Firefox and Opera also have some limited ability to apply javascript via CSS. The usage of this is very very narrow. Don't do it for general purpose scripts.

Yeah, I knew it, but their support is so weak that I avoid it as much as I can.
I believe the only time I did this, was to implement a "position:fixed" in ie6, on an existing site that was so messed up that I could not trigger the browser in the right mode.

I had a bit of javascript in the css that was computing the "top" value on each events.
Brrrr, it gaves me shivers, just to think about it.
Talk about something messy...