配列が動作しないIfステートメント

Question

StackOverFlowの新機能 - 簡単な質問があります。

Ifステートメントの条件がtrueの場合、Div要素の色が変更されない理由を教えてください。 .MeTestの表示プロパティはブロックです。また、コンソールにエラーメッセージはありません。

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の要素は1つのみです。

document.getElementsByClassName("haveIt")[0] 

はまた、あなたがチェックした条件が真であることがオードで、あなたはクラスMeTest付きのdivの表示ブロックとスタイルを定義する必要があります。ですから、以下の変更を行う必要があります。

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：私はあなたのスニペットを実行したときに見られるためには、400ピクセルから200pxのにトップの値を変更しました。私は、CSS スタイルシートでその要素を呼び出し、表示に変更すると - 私は文についての私の最初の質問には、あなたがHTML DOM内のブロックに 表示に変わっていることがわかり

更新

ブロック、それはそのように動作しません。 何が起こっているのか？要素のdisplayプロパティがスタイルシートでを課しているので、それは動作しません

、それはhtml要素のstyle属性に含まれる値ではありません。この場合、以下のスニペットのように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

Answer 2

var x = document.getElementsByClassName（ "MeTest"）[0]; if（getComputedStyle（x）.getPropertyValue（ "display"）== 'ブロック'） { document.getElementsByClassName（ "haveIt"）[1] .style.backgroundColor = "red"; }