SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Add Class, NOT setAttribute

    How do I add a class without using setAttribute using the code below?


    Code JavaScript:
    var drop_selected = document.getElementsByName('search_category');
    	for (var x in drop_selected) {
    		drop_selected[x].onclick = function(){
    			for (var c=0; c<drop_selected.length; c++) { 
    				drop_selected[c].setAttribute("class", ""); 
    			}
    			this.setAttribute("class", "drop_selected");
    			return false;
    		}
    	}

  2. #2
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    el.className = 'myClass';

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    And if you have pre-existing class names that you don't want to clobber, you can use some hasClass, addClass and removeClass functions to simplify the process.

    Code javascript:
    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,' ');
        }
    }

    And one I always like to include - toggleClass

    Code javascript:
    function toggleClass(ele, cls) {
        if (hasClass(ele, cls)) {
            removeClass(ele, cls);
        } else {
            addClass(ele, cls);
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    And if you have pre-existing class names that you don't want to clobber, you can use some hasClass, addClass and removeClass functions to simplify the process.

    Code javascript:
    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,' ');
        }
    }

    And one I always like to include - toggleClass

    Code javascript:
    function toggleClass(ele, cls) {
        if (hasClass(ele, cls)) {
            removeClass(ele, cls);
        } else {
            addClass(ele, cls);
        }
    }
    What does toggle class toggle to? It only lets you define one class

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by unemployment View Post
    What does toggle class toggle to?
    It toggles whether your specified class name appears or not.
    If the class name is already on the element, it is removed from that element.
    If the class name is not on the element, it's added to that element.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •