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


91

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

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

我发现脚本使用函数来按类获取元素(例如此页面上的#8:http : //www.dustindiaz.com/top-ten-javascript/),但是我不知道如何集成它们与我的切换脚本一起使用。

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

主要问题:如何获取下面的Toggle脚本按类而不是按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>

3
为什么我一直都没有使用jQuery,我接受了@Jonathan Sampson的关于使用jQuery的建议,并且有效!(CMS的答案是我以为我正在寻找的答案,但无法使它正常工作)我给每个链接指定了一个ID,并且使用jQuery我可以定义在单击时显示的类和隐藏的类。特定链接。大!这个解决方案似乎太好了,难以置信。jQuery似乎太好了,难以置信。使用jQuery有什么弊端?作为新手,我为什么要使用Javascript而不是jQuery?
艾伦(Alan)2009年

Answers:


77

现代浏览器支持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,2009年

2
您也可以从jQuery.com下载源文件并在本地引用。
桑普森

21
@Paulo:跨站点脚本不适用于<script>标签。Google托管的jQuery专为生产网站(作为CDN)而设计。如果您的网站是https,请确保使用https版本,以避免出现混合内容警告。
Chetan S

3
实际上,<script>标记注入是跨站点JSONP请求的基础。
Chetan S

2
Paulo,您确实意识到,一旦将jQuery与<script>标记一起使用,就完全没有跨站点限制了吗?
黑暗猎鹰

88

getElementsByClassNameFirefox,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
为什么要使用该内部函数而不是仅使用普通代码?
托马什Zato -恢复莫妮卡

例如-1,假定屏幕上的所有元素都有块显示。在toggle_visibility中,如果e是<span>,则它应该是“ inline”而不是“ block”。一个更强大的解决方案是定义一个CSS类:.invisible {display:none!important}并使用JavaScript(或jQuery)从元素中分配和取消分配该类
John Meyer15年

6
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

通过使用getElementsByClassName,它可以返回多个类的数组。因为同一类名称可以在同一HTML页面内的多个实例中使用。我们使用数组元素ID来定位所需的类,在我的情况下,它是给定类名的第一个实例。因此,我使用了[0]



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

在类声明后附加ID

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.