2 
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-collat​​eral box-related”的可见性，如果它是可见的，我想用类名“库存中的可用性”切换另一个段落的可见性

4

3 回答 3

8

getElementsByClassName()总是给你一个 nodeList 对象，即使它只有一个成员。NodeList 对象没有style属性，因此您需要首先进行迭代elems以if检查可见性，就像您在代码中所做的那样。

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

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

编辑

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

所以，也许你不需要那个id，实际问题发生在尝试 get 时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;

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

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

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

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

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

然后在脚本中：

var elem = document.getElementById('checkThisOnly');
if (getComputedStyle(elem).visibility...) {
    ......
}
于 2012-12-18T17:49:27.090 回答
1

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

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

于 2012-12-18T17:49:07.663 回答
0

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

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

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返回的元素。注意函数名中的复数 -

get​<strong>Elements​ByClassName - 返回一组具有所有给定类名的元素。

于 2012-12-18T17:56:02.917 回答