SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    531
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Checking for a class attribute in IE

    i have a form with various fields in it. none of them have IDs, just names.

    this works in firefox...

    Code JavaScript:
    var e = document.getElementsByName('myelement')[0];
    if (e.className && e.className == 'myclass') {
         // do something
    }

    in IE i get this error...

    'className' is null or not an object

  2. #2
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    531
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this seems to have "fixed" it...

    Code JavaScript:
    var e = document.getElementsByName('myelement');
    if (e.length) {
         e = e.item(0);
    }
    if (e.className && e.className == 'myclass') {
         // do stuff
    }

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Ahh, I was thinking of an alternative

    All elements have class names, even if just an empty string, so you can just check if an element exists, and if so then you can go ahead and check the classname itself.

    Code javascript:
    var e = document.getElementsByName('myelement');
    if (e && e.className == 'myclass') {
         // do stuff
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    classes are a space separated list of names so you will want to use a regular expression to match the class name when it isn't the only class assigned to the tag.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The following classes seem to have survived as a best practice for class handling.

    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, ' ');
    	}
    }
    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
  •