Question

StackOverFlow上的新功能 - 只是有一个简单的问题。

如果If语句的条件为真，请告诉我为什么它不会改变Div元素的颜色。 .MeTest的显示属性是阻止 - 此外，控制台中没有错误消息。

这是我的测试代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢！

Answer 1

您只有一个类名为haveIt的元素。所以你应该做出以下改变：

document.getElementsByClassName("haveIt")[0]

此外，在您检查为真的条件下，您应该为具有MeTest类的div定义带有显示块的样式。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

<强>更新

我在关于陈述的第一个问题中看到，你改为在HTML DOM中显示为Block - 当我在Css中调用该元素时样式表并将显示更改为块，它不会那样工作。有什么想法为什么会发生？

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

var x = document.getElementsByClassName（＆＃34; MeTest＆＃34;）[0]; if（getComputedStyle（x）.getPropertyValue（＆＃34; display＆＃34;）==＆＃39; block＆＃39;） { document.getElementsByClassName（＆＃34; haveIt＆＃34;）[1] .style.backgroundColor =＆＃34; red＆＃34 ;; }

数组不能与If语句一起使用

2 个答案: