Changing CSS Class on load

**SawnDiddle** · 01-17-2006, 03:25 AM

I found this code on the net, but I was wondering if someone could tell me how I can have a piece of text change its class when the page loads. What I want to do is, instead of changing the class when u click on a link, I want to change the class when the page loads.

Code:

<style type="text/css">
.first
{
color: black;
}
.second
{
color: red;
}
</style>
<script language="JavaScript">
function change(id, newClass) {

identity=document.getElementById(id);

identity.className=newClass;

}
</script>
<h1 class="first" id="changeme">Changeable text</h1>
<a href="javascript:;" onClick="change('changeme', 'second');">RED</a> |
 <a href="javascript:;" onClick="change('changeme', 'first');">BLACK</a>

**jscheuer1** · 01-17-2006, 06:30 AM

Changing the class onload will often be such a quick event that the original class of the element will never be apparent in certain situations. However, the way to do this onload, would be to do it onload. Find the body tag on the page and put this (highlight red) in it:

Code:

<body onload="change('changeme', 'second');">

**mwinter** · 01-17-2006, 03:29 PM

Originally Posted by SawnDiddle

The language attribute was deprecated long ago:

HTML Code:

<script type="text/javascript">

function change(id, newClass) {

identity=document.getElementById(id);

identity.className=newClass;

}

As you have omitted the var keyword, the identity variable will become global (not a desirable thing). Feature detection and a bit of defensive programming wouldn't go amiss, either:

Code:

function setClassName(id, className) {
  var element;

  if(document.getElementById && (element = document.getElementById(id))) {
    element.className = className;
  }
}

<a href="javascript:;" [...]

Ack!

I hope that this is just an example. Don't use the javascript: pseudo-scheme like this; it's not what it was designed to do, and can have negative effects. Using an empty fragment identifier and cancelling the click event is marginally better (but only just):

HTML Code:

<a href="#" onclick="setClassName('changeme', 'second'); return false;">

Mike

**SawnDiddle** · 01-17-2006, 04:44 PM

thanks for the help, but is there a way that I can use the onload code for another part of my page other than the body tag?

The reason is that on my site, when a page is loaded, it loads 3 parts (header, body and footer). For this code, I want to place the code in the body and change an element in the header when it loads. Unfortunately, the body tag is right in the middle of my header file.

This is what a typical page looks like. The javascript will go in a page very similar to this one and will change something in the header file.

Code:

<? include("/home/shadowru/public_html/cookiecheck.php"); ?>
<!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">
<html>
<head>
<title>ShadowRulers.com</title>

<? include($headervar.$skin.$extension); ?>

</div>
<div id="midcol"><div class="sborder">
    <div class="contentHeader">History of ShadowRulers.com</div></div><br />
  <div class="sborder">Some Content here.</div><br />
        </div>
  
<? include($footervar.$skin.$extension); ?>

Thread: Changing CSS Class on load

Thread Tools

Search Thread

Changing CSS Class on load

Bookmarks

Bookmarks

Posting Permissions