Arrays funktionieren nicht mit If-Anweisung

Question

Neu bei StackOverFlow - Haben Sie einfach eine einfache Frage.

Bitte lassen Sie mich wissen, warum die Farbe des Div-Elements nicht geändert wird, wenn die Bedingung für die If-Anweisung erfüllt ist. Die Anzeigeeigenschaft von .MeTest ist "Block". Außerdem befinden sich keine Fehlermeldungen in der Konsole.

Hier ist mein Testcode:

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>

Dank!

Answer 1

Sie haben nur ein Element mit dem Klassennamen haveIt. So sollten Sie die folgende Änderung vornehmen:

document.getElementsByClassName("haveIt")[0] 

Weiterhin in orde Sie die Bedingung erfüllt sein überprüfen, sollten Sie einen Stil mit Anzeigeblock für die div mit der Klasse MeTest definieren.

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: Ich änderte den Wert von oben von 400px zu 200px, um zu sehen, wenn Sie den Code-Schnipsel aus.

aktualisieren

Ich sehe, dass über Aussagen in meine erste Frage, die Sie Anzeige geändert im HTML-DOM zu blockieren - Wenn ich dieses Element im Stylesheet Css aufrufen und die Anzeige ändern Block, es funktioniert nicht so. Irgendwelche Gedanken, warum es passiert?

Es funktioniert nicht, da die Anzeigeeigenschaft des Elements durch das Stylesheet auferlegt ist, es ist nicht ein Wert im style-Attribut des HTML-Elements enthalten. Das können Sie in diesem Fall tun, um getComputedStyle Methode wie im folgenden Snippet zu verwenden.

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>

Für Informationen in Bezug auf die Window.getComputedStyle einen Blick Sie [hier]. 1

Answer 2

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