Question

function CheckavailOnload()
{
  var elems = document.getElementsByClassName('box-collateral box-related');
  for(var i = 0; i < elems.length; i++){
  if(elems.style.visibility == 'visible')
  {
     var av = document.getElementsByClassName('availability in-stock');
     for(var i = 0; i < elems.length; i++) {
     av[i].style.visibility = 'visible';
    }
  }
  else
  {
     var av = document.getElementsByClassName('availability in-stock');
     for(var i = 0; i < elems.length; i++) {
     av[i].style.visibility = 'hidden';
    }
  }
 }
}
CheckavailOnload();

这里我试图检查div“box-collateral box-related”的可见性如果它可见我想要知道另一个段落的可见性，类名“库存可用性”

Answer 1

getElementsByClassName()总是为您提供一个nodeList对象，即使它只有一个成员。 NodeList对象没有style属性，因此您需要在第一个elems中迭代if以检查可见性，就像您在代码中进一步完成一样。

如果您确定只有一个成员，则可以使用elems[0].style.visibility检查其可见性。

如果您想检查特定元素的可见性，可以给它id并使用document.getElementById()获取该元素。

修改

感谢小提琴，现在我们可以得到一些结果。

所以，也许你不需要那个id，当试图获得style时会发生实际问题，如果没有明确指定的话。要解决此问题，您需要使用getComputedStyle()：

function CheckavailOnload() { var elems = document.getElementsByClassName('box-collateral box-related'); for (var i = 0; i < elems.length; i++) { if (getComputedStyle(elems[i]).visibility == 'visible' || getComputedStyle(elems[i]).display == 'block') { alert("hello"); var av = document.getElementsByClassName('availability in-stock'); for (var j = 0; j < av.length; j++) { av[j].style.visibility = 'visible'; } } else if (getComputedStyle(elems[i]).visibility == 'hidden' || getComputedStyle(elems[i]).display == 'none') { var av = document.getElementsByClassName('availability in-stock'); for (var k = 0; k < av.length; k++) { av[k].style.visibility = 'hidden'; } } } } window.onload = CheckavailOnload;

此代码将检查分配给类box-collateral box-related的所有元素。 jsFiddle的工作演示。

还要注意使用window.onload，这可以确保您在解析元素之前没有尝试获取元素。如果elems和{{{{}}}中有不同数量的元素，我会将av切换为for...j中的for...k - 和elems -loops，以使其正常工作1}}。

如果第一个找到带有主题类的元素是要检查的元素，则只需在所有av表达式中将i替换为0。

如果您只想检查特定元素，可以给它elems[i]，并使用getElementById()获取对它的引用。在HTML中：

id

然后在剧本中：

<div id="checkThisOnly" class="box-collateral box-related">

Answer 2

“elems”是一组元素，但您尝试查看其“样式”属性。您需要重新排列事物，以便循环使用elems，然后检查每个元素的属性。

同样在你以后的循环中通过av - 你正在查看elems.length进行扫描。我觉得这有点困惑。

Answer 3

所以，正如我在my comment中提到的那样，你似乎错过了“隐藏”这个词的引用。我将假设这是一个复制粘贴错误。

以下是代码的精简版，演示了实现目标的一种方法 -

function Checkavailability()
{
  var elems = document.getElementsByClassName('box-collateral box-related');
  for (var i=0; i<elems.length; i++) {
    if(elems[i].style.visibility == 'visible'){
      // do some stuff
    }
    else{
       // do some stuff
    }
  }
}

这里的主要区别是我们迭代覆盖getElementsByClassName返回的所有元素。请注意函数名称中的复数 -

getElementsByClassName - Returns a set of elements which have all the given class names.

未捕获的TypeError：无法读取未定义的属性“可见性”

3 个答案: