javascript - 数组不适用于 If 语句

Question

StackOverFlow 的新功能 - 只需提出一个简单的问题即可。

能否请您告诉我为什么当 If 语句的条件为真时它没有改变 Div 元素的颜色。 .MeTest 的显示属性是 block - 此外，控制台中没有错误消息。

这是我的测试代码:

var x = document.getElementsByClassName("MeTest");

if (x[0].style.display == 'block')
{
  document.getElementsByClassName("haveIt")[1].style.backgroundColor = "red";
}

#MeTest {
  position: fixed;
  height: 200px;
  width: 200px;
  background-color: #fdacc3;
}

div {
  background: #4dd329;
  border: 1px solid white;
  height: 200px;
  width: 200px;
  display: block;
}

.MeTest {
  display: block;
}

<div class="MeTest"></div>
<div class="testThis" style="float: right;"></div>
<div class="haveIt" style="position: fixed; top: 400px;"></div>

谢谢!

Answer 1

您只有一个类名为haveIt 的元素。因此，您应该进行以下更改:

document.getElementsByClassName("haveIt")[0]

此外，为了使您检查的条件为真，您应该为类为 MeTest 的 div 定义一个带有显示 block 的样式。

var x = document.getElementsByClassName("MeTest");
if (x[0].style.display == 'block') 
{ 
    document.getElementsByClassName("haveIt")[0].style.backgroundColor = "red"; 
}

#MeTest{

    position: fixed;
    height: 200px;
    width: 200px;
    background-color: #fdacc3;

}

div{
    background: #4dd329;
    border: 1px solid white;
    height: 200px; width: 200px;
    display: block;
}

.MeTest{
    display: block;
}

<div class="MeTest" style="display: block;"></div>
<div class="testThis" style="float: right;"></div>
<div class="haveIt" style="position: fixed; top: 200px;"></div>

PS:我将 top 的值从 400px 更改为 200px，以便在运行代码段时能够看到。

更新

I see that in my first question about statements, you changed to display to Block in the HTML DOM - When I call that element in the Css stylesheet and change the Display to Block, it doesn't work that way. Any thoughts why it is happening?

它不起作用，因为元素的显示属性是由样式表强加的，它不是包含在 html 元素的样式属性中的值。在这种情况下，您可以使用 getComputedStyle 方法，如下面的代码片段所示。

var x = document.getElementsByClassName("MeTest");
var display = window.getComputedStyle(x[0],null)
                    .getPropertyValue("display");
if (display == 'block'){ 
    document.getElementsByClassName("haveIt")[0].style.backgroundColor = "red"; 
}

#MeTest{

    position: fixed;
    height: 200px;
    width: 200px;
    background-color: #fdacc3;

}

div{
    background: #4dd329;
    border: 1px solid white;
    height: 200px; width: 200px;
    display: block;
}

.MeTest{
    display: block;
}

<div class="MeTest"></div>
<div class="testThis" style="float: right;"></div>
<div class="haveIt" style="position: fixed; top: 200px;"></div>

有关 Window.getComputedStyle 的信息，请查看 [此处]。 1