如何使用JavaScript获得getElementByClass而不是GetElementById？

皇甫展

2023-03-14

问题内容：

我试图根据每个DIV的类别切换网站上某些DIV元素的可见性。我正在使用基本的JavaScript代码片段进行切换。问题在于该脚本仅使用getElementById，而getElementByClassJavaScript不支持。不幸的是，我必须使用class而不是id来命名DIV，因为DIV名称是由我的XSLT样式表使用某些类别名称动态生成的。

我知道某些浏览器现在支持getElementByClass，但是由于Internet Explorer不支持，所以我不想走这条路。

我发现脚本使用函数来按类获取元素（例如此页面上的＃8：），但是我不知道如何集成它们与我的切换脚本一起使用。

这是HTML代码。DIV本身缺失，因为它们是在XML / XSLT页面加载时生成的。

主要问题：如何获取下面的Toggle脚本以按类获取Element而不是按ID获取Element？

<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>

如何使用JavaScript获得getElementByClass而不是GetElementById？

较旧的答案

相关阅读

相关文章

相关问答

相关工具

相关文档