Is there a way in any browser to add/remove class names? For example, if I have a div with class names and I just want to remove/add 'name2' is there a way to do that?
Thanks, rodchar
Add a comment
|
3 Answers
If you can use jQuery:
to remove:
$('#div1').removeClass('name2')
to add:
$('#div1').addClass('name2')
If you can't use jQuery, I found this url
http://snipplr.com/view/3561/addclass-removeclass-hasclass/
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
Honestly, I haven't used the non-jquery approach but it seems enough
Comments
There will be a standard way to do this. HTML5 introduces the classList property, which works like this:
element.classList.add('foo');
element.classList.remove('bar');
if (element.classList.contains('bof'))
element.classList.toggle('zot');
Firefox 3.6 already has this feature and it's being worked on in WebKit.
Here is a pure-JS implementation:
// HTML5 classList-style methods
//
function Element_classList(element) {
if ('classList' in element)
return element.classList;
return {
item: function(ix) {
return element.className.trim().split(/\s+/)[ix];
},
contains: function(name) {
var classes= element.className.trim().split(/\s+/);
return classes.indexOf(name)!==-1;
},
add: function(name) {
var classes= element.className.trim().split(/\s+/);
if (classes.indexOf(name)===-1) {
classes.push(name);
element.className= classes.join(' ');
}
},
remove: function(name) {
var classes= element.className.trim().split(/\s+/);
var ix= classes.indexOf(name);
if (ix!==-1) {
classes.splice(ix, 1);
element.className= classes.join(' ');
}
},
toggle: function(name) {
var classes= element.className.trim().split(/\s+/);
var ix= classes.indexOf(name);
if (ix!==-1)
classes.splice(ix, 1);
else
classes.push(name);
element.className= classes.join(' ');
}
};
}
// Add ECMA262-5 string trim if not supported natively
//
if (!('trim' in String.prototype)) {
String.prototype.trim= function() {
return this.replace(/^\s+/, '').replace(/\s+$/, '');
};
}
// Add ECMA262-5 Array indexOf if not supported natively
//
if (!('indexOf' in Array.prototype)) {
Array.prototype.indexOf= function(find, from /*opt*/) {
for (var i= from || 0, n= this.length; i<n; i++)
if (i in this && this[i]===find)
return i;
return -1;
};
}
This does mean you have to write:
Element_classList(element).add('foo');
which is slightly less nice, but you'll get the advantage of the fast native implementation where avaialble.
2 Comments
Clement
You could have just do element.classList.add('foo'), .remove('foo'), and toggle('foo') directly on the classList object. developer.mozilla.org/en/DOM/element.classList
bobince
Errrm... yes, that's the exact same object specified by the W3 doc I linked. :-) The problem is support for legacy browsers, hence the above polyfill code.
its easy with javascript to change class name with any event for eg.
<script>
function changeClas()
{
document.getElementById('myDiv').className='myNewClass';
}
</script>
<div id="myDiv" onmouseover='changeClas()' class='myOldClass'> Hi There</div>
