1 reply [Last post]
patelc75
patelc75's picture
Offline
newbie
Brooklyn, NY
Last seen: 6 years 33 weeks ago
Brooklyn, NY
Joined: 2007-07-25
Posts: 3
Points: 0

Could someone explain how I change the CSS class name itself as opposed to the style attributes?

Basically, I would like to swap the class names of “selected” and “notselected” with Javascript. Like I said, I don’t want to manually change each any every style sheet attribute, just the class names themselves.

I would add an onclick() method to both the <a>’s of both <div>s. Will this even change the styles when the user clicks (the styles are in a .css file)?

I’m just not sure of the syntax on the actual swap. What’s syntax of accessing the parent <div> of the <a>? And what’s the DOM method for finding the “selected” <div>?

Thanks a lot!
Chirag

/mod - moved to off-topic ... Chris..S

Tags:
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Read up on the DOM.

Read up on the DOM. Javascript can change the DOM and those changes should take effect immediately.

The property you are looking to change is className. And given when you change an attribute from "notselected" to "selected" you are probably going to want to find the previously selected element and change it to notselected you need a little complexity.

The easiest way to do this would be using and ID for "selected" rather than a class.

onclick="document.getElementById('selected').id='';this.parentNode.id='selected';"

Personally I'd stick with classes and use a generic function to locate all elements with the searched for className and then process that list. Rather than go into all the details for doing that, I think you would be better off looking for a javascript toolkit (e.g. jquery, prototype, dojo) these make carrying out manipulations of the DOM in a cross-browser manner really straight forward.