How to getElementByClass instead of GetElementById with JavaScript

Question

I m trying to toggle the visibility of certain DIV elements on a website depending on the class of each DIV  I m using a basic JavaScript snippet to toggle them  The problem is that the script only uses getElementById  as getElementByClass is not supported in JavaScript  And unfortunately I do have to use class and not id to name the DIVs because the DIV names are dynamically generated by my XSLT stylesheet using certain category names   I know that certain browsers now support getElementByClass  but since Internet Explorer doesn t I don t want to go that route   I ve found scripts using functions to get elements by class  such as  8 on this page  http   www dustindiaz com top-ten-javascript    but I can t figure out how to integrate them with with my toggle script   Here s the HTML code  The DIVs themselves are missing since they are generated on page load with XML XSLT   Main Question  How do I get the below Toggle script to get Element by Class instead of get Element by ID    lt html gt    lt head gt    lt  --This is the TOGGLE script-- gt   lt script type  text javascript  gt   lt  --     function toggle visibility id           var e   document getElementById id          if e style display     block             e style display    none          else           e style display    block           -- gt   lt  script gt    lt  head gt    lt  --the XML XSLT page contents will be loaded here  with DIVs named by Class separating dozens of li s-- gt    lt a href     onclick  toggle visibility  class1     gt Click here to toggle visibility of class 1 objects lt  a gt    lt a href     onclick  toggle visibility  class2     gt Click here to toggle visibility of class 2 objects lt  a gt    lt  body gt   lt  html gt

User · Answer

My solution   First create   lt style gt   tags with an ID    lt style id  YourID  gt       YourClass  background-color red   lt  style gt    Then  I create a function in JavaScript like this   document getElementById  YourID   innerHTML     YourClass  background-color blue     Worked like a charm for me

User · Answer

document getElementsByClassName  CLASSNAME   0  style display    none     Acyually by using getElementsByClassName  it returns an array of multiple classes  Because same class name could be used in more than one instance inside same HTML page  We use array element id to target the class we need  in my case  it s first instance of the given class name So I ve used  0

User · Answer

Use it to access class in Javascript    lt script type  text javascript  gt  var var name   document getElementsByClassName  class name   0    lt  script gt

User · Answer

The getElementsByClassName method is now natively supported by the most recent versions of Firefox  Safari  Chrome  IE and Opera  you could make a function to check if a native implementation is available  otherwise use the Dustin Diaz method   function getElementsByClassName node classname      if  node getElementsByClassName       use native implementation if available     return node getElementsByClassName classname       else       return  function getElementsByClass searchClass node            if   node    null             node   document          var classElements                   els   node getElementsByTagName                   elsLen   els length              pattern   new RegExp       s   searchClass     s       i  j           for  i   0  j   0  i  lt  elsLen  i                if   pattern test els i  className                    classElements j    els i                 j                                  return classElements         classname  node           Usage   function toggle visibility className       var elements   getElementsByClassName document  className          n   elements length     for  var i   0  i  lt  n  i           var e   elements i         if e style display     block            e style display    none          else          e style display    block

User · Answer

Append IDs at the class declaration   aclass   hashone   hashtwo     codes      document getElementById   hashone    style visibility    hidden

User · Answer

adding to CMS s answer  this is a more generic approach of toggle visibility I ve just used myself   function toggle visibility className display       var elements   getElementsByClassName document  className          n   elements length     for  var i   0  i  lt  n  i           var e   elements i         if display length  gt  0           e style display   display         else          if e style display     block              e style display    none            else            e style display    block

User · Answer

Modern browsers have support for document getElementsByClassName  You can see the full breakdown of which vendors provide this functionality at caniuse  If you re looking to extend support into older browsers  you may want to consider a selector engine like that found in jQuery or a polyfill  Older Answer You ll want to check into jQuery  which will allow the following     quot  classname quot   hide       hides everything with class  classname   Google offers a hosted jQuery source-file  so you can reference it and be up-and-running in moments  Include the following in your page   lt script type  quot text javascript quot  src  quot http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js quot  gt  lt  script gt   lt script type  quot text javascript quot  gt      function           quot  classname quot   hide           lt  script gt

[javascript] How to getElementByClass instead of GetElementById with JavaScript?

Examples related to javascript

Examples related to class

Examples related to toggle

Examples related to getelementbyid

Examples related to getelementsbyclassname