Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Dynamically Adding/Removing Classes

Reply
Thread Tools

Dynamically Adding/Removing Classes

 
 
tomlong@gmail.com
Guest
Posts: n/a
 
      02-03-2006
In my last job we had a crummy function that did regex to add/remove
css classes to an element.

Does anyone have a better way to do this? Techniques or code would be
great. I'm almost surprised this isn't in prototype.js after finding
Element.cleanWhiteSpace(el) today.

Thanks!
Tom Longson (nym)
http://igargoyle.com/

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      02-03-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> In my last job we had a crummy function that did regex to add/remove
> css classes to an element.
>
> Does anyone have a better way to do this? Techniques or code would be
> great. I'm almost surprised this isn't in prototype.js after finding
> Element.cleanWhiteSpace(el) today.



<style type="text/css">
.red {color: red;}
.bb {font-weight: bold;}
.uu {text-decoration: underline;}
</style>


<script type='text/javascript'>

function deleteCSSClass(el, cssClass)
{
var c = el.className;
var re = new RegExp('\\b' + cssClass + '\\b','g');
if (c) el.className = cleanClassWhitespace( c.replace(re, '') );
}

function addCSSClass(el, cssClass)
{
el.className += ' ' + cssClass;
}

function cleanClassWhitespace(s)
{
return s.replace(/^\s+/,'').replace(/\s+/g,' ').replace(/$\s+/,'');
}

</script>


<span onclick="deleteCSSClass(this, 'red');" class="bb red uu">
click to remove .red class
</span>



--
Rob
 
Reply With Quote
 
 
 
 
tomlong@gmail.com
Guest
Posts: n/a
 
      02-06-2006
That's great. Here's one addition that makes it a tiny bit better (but
not by much). All I did was add a check to see if the className was
already there so if you add a class more than once, you don't have to
remove it multiple times.

function addCSSClass(el, cssClass)
{
if(el.className.indexOf(cssClass) == -1) {
el.className += ' ' + cssClass;
}
}

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      02-06-2006
(E-Mail Removed) wrote:
> That's great. Here's one addition that makes it a tiny bit better (but
> not by much). All I did was add a check to see if the className was
> already there so if you add a class more than once, you don't have to
> remove it multiple times.
>
> function addCSSClass(el, cssClass)
> {
> if(el.className.indexOf(cssClass) == -1) {
> el.className += ' ' + cssClass;
> }
> }


Yes, good idea. You should use a regular expression to ensure you match
whole words, indexOf will match 'blah' in 'blah' and 'blah2':

function addCSSClass(el, cssClass)
{
var re = new RegExp('\\b' + cssClass + '\\b');
if(!re.test(el.className)) {
el.className += ' ' + cssClass;
}
}



--
Rob
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Classes within classes David ASP .Net 2 07-22-2005 07:13 PM
What is the difference between nested classes and inner classes ? Razvan Java 5 07-27-2004 07:59 PM
Modifiers applied to attributes, local variables, member functions, classes and inncer classes ! Razvan Java 11 07-17-2004 08:57 PM
Can I using reflection to get all child classes or classes undera package dynamically? Carfield Yim Java 1 05-31-2004 05:33 PM
How to access inner classes variables & methods from outer classes lonelyplanet999 Java 1 11-13-2003 01:54 PM



Advertisments