getElementByID有效,getElementsByClassName不起作用

时间:2016-02-15 01:35:06

标签: javascript

我正在开发一个解决方案,其中javascript更改div1而不是div2。 此代码适用于getElementbyId,但不适用于getElementbyClassName。为什么这不起作用?

function refer(Div1, Div2) {
    if (document.getElementByClassName('Div1')) {
        if (document.getElementByClassName('Div1').style.display == 'block') {
            var elems = document.getElementsByClassName('Div2');
            for(var i = 0; i < elems.length; i++) { 
                elems[i].style.display = 'block';
            }

            var elem = document.getElementsByClassName('Div1');
            for(var i = 0; i < elem.length; i++) {
                elem[i].style.display = 'none';
            }
        }
    }
}

2 个答案:

答案 0 :(得分:0)

以下是如何使用getElementsByClassNameFiddle

的示例

这适合你吗?

array = document.getElementsByClassName('div1');
for (i = 0; i < array.length; i++) {
    array[i].style.backgroundColor = "red";
}

在Chrome和Edge中没有任何问题。

答案 1 :(得分:0)

您正在使用数组作为对象,getElementbyId和之间的差异 getElementsByClassName就是:

  • getElementbyId会返回一个对象。
  • getElementsByClassName会返回一个数组。

getElementsByClassName方法

  

getElementsByClassName(classNames)方法接受一个字符串   包含一组无序的空格分隔标记   代表类。调用时,该方法必须返回实时   NodeList对象,包含文档中的所有元素   拥有该参数中指定的所有类,获得了   通过在空格上分割字符串来分类。如果没有令牌   在参数中指定,那么该方法必须返回一个空   节点列表。

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

的getElementById

  

getElementById()方法访问具有指定标识的第一个元素。

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

在代码中

行:

  

1 if (document.getElementByClassName('Div1')) {

     

2 if (document.getElementByClassName('Div1').style.display == 'block') {

NOT 按预期工作:特别是第二行(2),getElementByClassName将返回一个数组,数组将 NOT 拥有style属性,您可以通过迭代来访问每个element

这就是函数getElementById正在为你工作的原因,这个函数会返回直接对象,因此你将能够访问style属性。

一个有效的代码:

function refer(Div1,Div2) {

           var elem = document.getElementsByClassName('Div1');
            var elems = document.getElementsByClassName('Div2');
            for(var i = 0; i < elem.length; i++) {

                if (elem[i]) {
                   if (elem[i].style.display == 'block') {

                       elem[i].style.display = 'none';

                       for(var i = 0; i < elems.length; i++) { 
                           elems[i].style.display = 'block';
                       }
                   }
               }
           }
}