javascript - 未捕获的TypeError:无法读取未定义的属性 'visibility'

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“与框相关的与盒子相关的”的可见性，如果可见，我想将另一个段落的可见性与类名“Availability in-stock”结合起来

最佳答案

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和av中的元素数量不同，则应该可以正常工作。

如果找到的第一个带维护类的元素是要检查的元素，则可以简单地在所有i表达式中将0替换为elems[i]。

如果您只想检查特定元素，则可以给它一个id，并使用 getElementById() 获得对该元素的引用。在HTML中:

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

然后在脚本中:

var elem = document.getElementById('checkThisOnly');
if (getComputedStyle(elem).visibility...) {
    ......
}

关于javascript - 未捕获的TypeError:无法读取未定义的属性 'visibility'，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13938562/