SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE vs FF : className vs class

    Hi all

    I have some tabs on my page. As the use clicks on them the content updates. Simple stuff, except for (well along with my other post) IE seems to only recognise the "className" property while FF recognises the "class" property. Here is some code to explain

    Code:
      var tag = document.createElement("div");
      // this will work for FF
      tag.setAttribute("class" , "my_class");
      // this will work for IE
      tag.setAttribute("className" , "my_class");
    My question is, is there a way to figure out which property is used by the browser?

    I tried things like

    Code:
    if(document.getElementById("my_tag").className)
      alert('IE');
    else
      alert('FF');
    And various other things like that, but nothing worked.

    What I did for a quick fix was just add both properties (class and className). I could be wrong, but I dont think this is the way to go, right?

    Any help will be appreciated
    Thanks

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The easiest way in this case is to use property notation instead of setAttribute().

    Code:
    var tag = document.createElement("div");
    tag.className = "my_class";
    Works in all browsers, AFAIK.

    IE is buggy and setAttribute() doesn't work for attributes whose name is the same as a reserved word in JScript (like class and for, which have to be specified as className and htmlFor). Using the property notation should work better cross-browser.

    You won't get a match with document.getElementById(), since you're setting the class attribute, not id.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome man thanks for the help.

    What is the point of the setAttribute function then, if this is the propper method? If you dont mind me asking?
    Should I use this notation for all properties (src, id, etc..)?

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The setAttribute() function is defined in the Document Object Model (DOM) Core, which can be used with HTML, XML or – in theory – any similar markup language.

    The properties are defined in the DOM1 HTML, and are specific to HTML.

    It's entirely up to you if you want to use setAttribute() where possible and just use property notation for className and htmlFor, or if you want to use properties all the way.

    As long as the attribute name is known, there's no major difference. If the attribute name is derived dynamically, however, the setAttribute() syntax is probably easier to use and to read. Of course, you'll get in trouble with class and for then.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool nice explination.
    Thanks again.
    Cheers

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    As long as the attribute name is known, there's no major difference. If the attribute name is derived dynamically, however, the setAttribute() syntax is probably easier to use and to read. Of course, you'll get in trouble with class and for then.
    I very rarely use setAttribute() and getAttribute().

    Array notation works great.
    Code:
    var prop = 'className';
    tag[prop] = "my_class";
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool thanks for some more info


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
  •