• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1433
  • Last Modified:

changing the classname of a div

Hi There,

I'm trying to use javascript to change the class name of an object (div) with onmouseover and onmouseout events. I tried the code below which seems to work fine in IE and Safari but FF is returning an error:

ctl00_mainContent_1 is not defined

Can someone post some cross browser code that will perform a similar function without giving me an error?

Sean - thanks in advance

!----- js code
function setClassName(objId, className) {
    	document.getElementById(objId.getAttribute("id")).className = className;
--html code
        <div id="ctl00_mainContent_1" class="thumbs"><a href="#" onclick="NextPreviouspage(1);" onmouseover="setClassName(ctl00_mainContent_1,'thumbsGlow');" onmouseout="setClassName(ctl00_mainContent_1,'thumbs');"><img src="images/photography/thumb_1.jpg" border="0" /><a/></div>

Open in new window

1 Solution
Pratima PharandeCommented:
Try like this

 function setClassName(objId, className) {
          document.getElementById(objId).className = className;



<div id="div1" class="x" onmouseover="setClassName('div1','y')">
youw ill need to be a bit more thorough to cover all browsers
var newObject = document.getElementById(objId)
newObject.setAttribute('className', 'name_of_css_class');// for IE
newObject.setAttribute('class', 'name_of_css_class');// for others (these are both needed)

Open in new window


turn into

onmouseover="this.className = 'thumbsGlow'"

Should be fine in modern browsers
MrAgileAuthor Commented:
Hi All,

Thanks for the answers. naspinski's answer was the one that worked in all browsers. I appreciate everyone's help.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now