Best IT Recipes

How to getElementByClass instead of GetElementById using Javascript?

I am trying to switch the visibility of certain DIV elements on a website depending on the class of each DIV. I use the basic Javascript snippet to switch them. The problem is that the script uses only getElementById, since getElementByClass is not supported in Javascript. And, unfortunately, I have to use a class, not id, to call a DIV, because DIV names are dynamically generated by my XSLT stylesheet using specific category names.

I know that some browsers now support getElementByClass, but since Internet Explorer I don’t want to go that route.

I found scripts using functions to get elements by classes (for example, # 8 on this page: http://www.dustindiaz.com/top-ten-javascript/ ), but I cannot figure out how to integrate them using my switch script.

Here is the html code. DIVs themselves are missing, as they are generated when the page loads using XML / XSLT. Thank you very much in advance.

Main question: How to get below a Toggle script to get an Element by Class instead of an Element by ID?

<html> <head> <!--This is the TOGGLE script--> <script type="text/javascript"> <!-- function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } //--> </script> </head> <!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's--> <a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a> <a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a> </body> </html>
+82
javascript class toggle getelementbyid getelementsbyclassname
Dec 19 '09 at 17:38
source share
6 answers

Modern browsers have support for document.getElementsByClassName . You can see a complete breakdown of how vendors provide this functionality in caniuse . If you want to expand support in older browsers, you can consider a selection mechanism similar to that found in jQuery or polyfill.

Old answer

You want to test jQuery , which will allow the following:

 $(".classname").hide(); // hides everything with class 'classname'

Google offers a hosted jQuery source file, so you can link to it and run quickly and quickly. Include the following on your page:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".classname").hide(); }); </script>
+71
Dec 19 '09 at 17:40
source share

Now the getElementsByClassName method is supported by the latest versions of Firefox, Safari, Chrome, IE and Opera, you can make a function to check if the native version 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 < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; })(classname, node); } }

Using:

 function toggle_visibility(className) { var elements = getElementsByClassName(document, className), n = elements.length; for (var i = 0; i < n; i++) { var e = elements[i]; if(e.style.display == 'block') { e.style.display = 'none'; } else { e.style.display = 'block'; } } }
+83
Dec 19 '09 at 17:45
source share

adding CMS to the answer , this is a more general approach toggle_visibility I just used:

 function toggle_visibility(className,display) { var elements = getElementsByClassName(document, className), n = elements.length; for (var i = 0; i < n; i++) { var e = elements[i]; if(display.length > 0) { e.style.display = display; } else { if(e.style.display == 'block') { e.style.display = 'none'; } else { e.style.display = 'block'; } } } }
+2
Sep 16 '10 at 17:28
source share

My decision:

First create the "<style>" tags with the id.

 <style id="YourID"> .YourClass {background-color:red} </style>

Then I create a function in JavaScript, for example:

 document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

Worked like a charm for me.

+2
Apr 17 '13 at 18:46
source share

Use it to access the class in Javascript.

 <script type="text/javascript"> var var_name = document.getElementsByClassName("class_name")[0]; </script>
+2
Jun 28 '16 at 10:04 on
source share
 document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

In Acyally, using getElementsByClassName, it returns an array of several classes. Because the same class name can be used in more than one instance inside the same HTML page. We use the identifier of the array element for the target class that we need, in my case this is the first instance of the given class name. Therefore, I used [0]

+1
Nov 23 '17 at 8:33
source share


More articles:


All Articles