logo标签列表

如何使用JavaScript获取元素的类名而不是ID？

javascriptclasstogglegetelementbyidgetelementsbyclassname
103

我试图根据每个DIV的类别切换网站上某些DIV元素的可见性。我正在使用基本的JavaScript代码段来切换它们。问题是该脚本只使用了getElementById，因为在JavaScript中不支持getElementByClass。不幸的是，我必须使用类而不是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>
3
为什么我之前没有一直使用jQuery呢？我采纳了@Jonathan Sampson的建议，使用了jQuery，它太棒了！（CMS的答案是我一直在寻找的答案，但我无法让它正常工作）我给每个链接一个id，使用jQuery我可以定义在单击特定链接时显示哪些类和隐藏哪些类。 太好了！这种解决方案似乎太棒了。jQuery似乎太棒了。使用jQuery有什么缺点？作为一个新手，为什么我要使用JavaScript而不是jQuery？ - Alan
8个回答
88

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';
     }
  }
}
2
你为什么使用内部函数而不是普通代码？ - Tomáš Zato
在 toggle_visibility 中，如果 e 是 <span>，则应为 'inline' 而不是 'block'，例如使用 -1 假设屏幕上的所有元素都具有块显示。一个更强大的解决方案是定义一个 CSS 类：.invisible { display: none !important }并使用 JavaScript（或 jQuery）从元素中分配和取消分配该类。 - John Meyer
82

现代浏览器支持 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>
1
尽管不错，但由于大多数现代浏览器实施的跨站脚本攻击安全机制，Google 托管的 jQuery 仅适用于最简单的事情。 - Paulo Santos
2
您也可以从 jQuery.com 下载源文件并在本地引用它。 - Sampson
22
@Paulo：跨站脚本攻击不适用于<script>标签。谷歌托管的jQuery专门为生产网站设计（作为CDN）。如果您的网站是https，请确保使用https版本以避免混合内容警告。 - Chetan S
3
事实上，<script> 标签插入是跨站点 JSONP 请求的基础。 - Chetan S
2
保罗，你知道一旦使用<script>标签包含jQuery，就没有任何跨站点限制了吗？ - Dark Falcon
7
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

实际上，使用getElementsByClassName会返回多个类的数组。因为在同一HTML页面内可能会使用相同的类名。我们使用数组元素ID来定位我们需要的类，对我来说，它是给定类名的第一个实例。所以我使用了[0]

4

用它来访问JavaScript中的类。

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

在 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';
       }
     }
  }
}
1

我的解决方案：

首先创建带有ID的"<style>"标签。

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

然后，我在JavaScript中创建了一个如下的函数：
document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

对我来说就像魔法一样好用。

1
在样式标签内使用换行符（<br>）是无效的。 - Chris Forrence
1
0

为了在控制台快速查看，在下面的代码中查看所有元素文本

for (let element of document.getElementsByClassName('classname')) {
    console.log(element.text);
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接