View Full Version : Change Class Name

12-21-2007, 05:53 AM
Hello, I am developing a website and need a little help as I do not fully know JS.

My problem is that I want my webpage to not load anything else but the stuff in the noscript tag once the page is loaded.

I already have a concept on how this should be done except I dont know how to write JS to make this happen.

Basically I have all the div's I want to hide set to where class="hide"

I Need a javascript function the gets the class of each div when the page loads.
if the class="hide" I want it to change the class to something else so it would load the page such as class="null"

My idea for the JS would be something like
window.onload = document.getElementByClass("hide").Classname="null";

but that idea did not work.
so how is the JS supposed to be written so that it changes the classnames of all the divs where class="hide" to a value of class="null"?

12-21-2007, 06:14 AM
You need a little more than that as there is no built in getElementsByClass function in javascript. This should work for you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.hide {
<script type="text/javascript">
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
function getElementsByClassName(oElm, strTagName, strClassName)
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++)
oElement = arrElements[i];
return (arrReturnElements)
window.onload = function()
var thedivs = getElementsByClassName(document,'div','hide');
for(i = 0; i < thedivs.length; i++)
thedivs[i].style.display = 'block';
Stuff that displays only if js is disabled
<div class="hide">test1</div>
<div class="hide">test2</div>
<div class="hide">test3</div>

12-21-2007, 04:02 PM
Thank you very much. This function worked perfectly :)