Javascript 未捕获的类型错误：无法读取未定义的属性“可见性”

Uncaught TypeError: Cannot read property 'visibility' of undefined

提问by geeta battin

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();

here i am trying to check the visibility of div "box-collateral box-related" if it is visible i want to toggel the visibility of another paragraph with class name "availability in-stock"

在这里，我试图检查 div“box-collat​​eral box-related” 的可见性，如果它是可见的，我想切换另一个段落的可见性，类名是“库存中的可用性”

回答by Teemu

getElementsByClassName()always gives you a nodeList object, even if it had only one member. NodeList object doesn't have styleproperty, hence you need to iterate elemsin the first ifto check the visibility, just like you've done further in your code.

getElementsByClassName()总是给你一个 nodeList 对象，即使它只有一个成员。NodeList对象没有style属性，因此你需要遍历elems在第一if检查知名度，就像你已经在你的代码进一步完成。

If you're sure there's only one member, you can check it's visibility by using elems[0].style.visibility.

如果您确定只有一个成员，您可以使用elems[0].style.visibility.

If you want to check the visibility of a particular element, you can give it an idand get that element using document.getElementById().

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

---

---

EDIT

编辑

Thanks for a fiddle, now we can have some results.

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

So, maybe you don't need that id, the actual problem occurs when trying to get style, if it's not explicitely assigned. To tackle this, you need to use getComputedStyle():

因此，也许您不需要那个，如果没有明确分配，则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;

This code will check all elements assigned to classes box-collateral box-related. A working demo at jsFiddle.

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

Notice also use of window.onload, which makes sure, that you're not trying to get elements before they are parsed. I switched elemsto avin for...j- and for...k-loops, supposed to work correctly, if there were different number of elements in elemsand av.

还要注意使用 of window.onload，这可以确保您不会在解析元素之前尝试获取元素。如果和 中的元素数量不同，我切换elems到avin for...j-and- for...kloops，应该可以正常工作。elemsav

If the first found element with maintioned classes is the one to check, you can simply replace iwith 0in all elems[i]expressions.

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

If you want to check only a particular element, you can give it an id, and get a reference to it with getElementById(). In HTML:

如果你只想检查一个特定的元素，你可以给它一个id，并用 获取对它的引用getElementById()。在 HTML 中：

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

And then in the script:

然后在脚本中：

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

回答by DrC

"elems" is a set of elements yet you try to look at its "style" property. You need to rearrange things so you loop through elems and then check the property on each one.

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

Also on your later loops through av - you are looking at elems.length for the scan. I think this is a bit confused.

同样在您稍后通过 av 循环时 - 您正在查看 elems.length 进行扫描。我觉得这有点混乱。

回答by Lix

So, as I mentioned in my comment, you seem to be missing a quote around the word "hidden". I'm going to assume that it's a copy paste error.

因此，正如我在评论中提到的，您似乎缺少围绕“隐藏”一词的引用。我将假设这是一个复制粘贴错误。

---

---

Here is a stripped down version of your code that demonstrates one way to achieve your goal -

这是您代码的精简版本，它演示了实现目标的一种方法 -

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
    }
  }
}

The main difference here is that we are itearatingover all of the elements that getElementsByClassNamereturns. Note the plural in the function name -

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

get?Elements?ByClassName - Returns a set of elements which have all the given class names.

得到？Elements?ByClassName - 返回一组具有所有给定类名的元素。