我正在开发一个解决方案,其中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';
}
}
}
}
答案 0 :(得分:0)
以下是如何使用getElementsByClassName
:Fiddle
这适合你吗?
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(classNames)
方法接受一个字符串 包含一组无序的空格分隔标记 代表类。调用时,该方法必须返回实时NodeList
对象,包含文档中的所有元素 拥有该参数中指定的所有类,获得了 通过在空格上分割字符串来分类。如果没有令牌 在参数中指定,那么该方法必须返回一个空 节点列表。
https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname
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';
}
}
}
}
}