如何使用 JavaScript getElementByClass 而不是 GetElementById？

IT技术 javascript class toggle getelementbyid getelementsbyclassname
2021-01-27 05:36:06

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

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

我发现使用函数按类获取元素的脚本（例如本页上的#8：http : //www.dustindiaz.com/top-ten-javascript/），但我不知道如何集成它们与我的切换脚本。

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

主要问题：如何获取以下 Toggle 脚本以按类获取元素而不是按 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>
6个回答

该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';
     }
  }
}
为什么要使用内部函数而不是简单的代码？
2021-03-17 05:36:06
-1 例如假设屏幕上的所有元素都有块显示的用法。在toggle_visibility 中，如果e 是<span> 那么它应该是'inline' 而不是'block'。一个更强大的解决方案是定义一个 CSS 类： .invisible { display: none !important } 并使用 JavaScript（或 jQuery）从元素分配和取消分配该类
2021-03-30 05:36:06

现代浏览器支持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>
尽管不错，但 Google 托管的 jQuery 仅对最简单的事情有用，因为大多数现代浏览器都实现了跨站点脚本安全性。
2021-03-23 05:36:06
@Paulo：跨站点脚本不适用于<script>标签。Google 托管的 jQuery 专为生产网站设计（作为 CDN）。如果您的站点是 https，请确保使用 https 版本以避免混合内容警告。
2021-03-23 05:36:06
Paulo，您确实意识到一旦将 jQuery 包含在 <script> 标签中，就完全没有跨站点限制了吗？
2021-03-26 05:36:06
您也可以从 jQuery.com 下载源文件并在本地引用。
2021-03-31 05:36:06
实际上，<script>标签注入是跨站 JSONP 请求的基础。
2021-04-05 05:36:06 
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

实际上，通过使用 getElementsByClassName，它返回一个包含多个类的数组。因为同一个类名可以在同一个 HTML 页面中的多个实例中使用。我们使用数组元素 id 来定位我们需要的类，在我的例子中，它是给定类名的第一个实例。所以我使用了 [0]

使用它来访问 Javascript 中的类。

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>

添加到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';
       }
     }
  }
}
其它你可能感兴趣的问题
上一篇如何检查复选框是否被选中？ 下一篇只检测伪元素上的点击事件