如何获得ElementElementByClass而不是Javascript的GetElementById？
我试图根据每个DIV的类来切换网站上某些DIV元素的可见性。 我正在使用一个基本的JavaScript片段来切换它们。 问题是脚本只使用getElementById，因为Javascript中不支持getElementByClass。 不幸的是，我不得不使用类而不是id来命名DIV，因为DIV名称是由我的XSLT样式表使用某些类别名称动态生成的。
我知道某些浏览器现在支持getElementByClass，但由于Internet Explorer不，我不想走这条路线。
我已经找到了使用函数来获取元素的脚本（比如这个页面上的＃8： http : //www.dustindiaz.com/top-ten-javascript/ ），但我不知道如何将它们集成与我的切换脚本。
这是html代码。 由于在使用XML / XSLT进行页面加载时生成了DIV，因此DIV本身缺失。 非常感谢。
主要问题：如何获得下面的切换脚本来获取元素的类，而不是通过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> 现代浏览器支持document.getElementsByClassName 。 您可以在caniuse上看到哪些供应商提供此功能的完整分类。 如果您希望将支持扩展到较旧的浏览器，则可能需要考虑使用jQuery或polyfill中的选择器引擎。
较老的答案
你会想检查到jQuery ，这将允许以下内容：
$(".classname").hide(); // hides everything with class 'classname'
Google提供了一个托管的jQuery源文件，所以你可以参考它，并在瞬间启动。 在您的页面中包含以下内容：
<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>
getElementsByClassName方法现在最新版本的Firefox，Safari，Chrome，IE和Opera本地支持，您可以创建一个函数来检查本机实现是否可用，否则使用Dustin Diaz方法：
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); } }
用法：
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'; } } }
添加到CMS的答案 ，这是一个更通用的toggle_visibility方法，我刚刚使用自己：
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'; } } } }
我的解决方案
首先用一个ID创建“<style>”标签。
<style id="YourID"> .YourClass {background-color:red} </style>
然后，我用JavaScript创建一个函数：
document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'
为我工作就像一个魅力。
用它来访问Javascript中的类。
<script type="text/javascript"> var var_name = document.getElementsByClassName("class_name")[0]; </script>
