陣列不能使用If語句

StackOverFlow上的新功能 - 只是有一個簡單的問題。陣列不能使用If語句

您能否讓我知道爲什麼在條件爲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>

謝謝！

來源

2017-03-14 Rehan

點擊F12，你應該看到至少有1個錯誤 –

您只有一個類名爲haveIt的元素。所以，你應該做如下改變：

document.getElementsByClassName("haveIt")[0]

此外，沃德你檢查的條件是真實的，你應該定義與顯示模塊的樣式與類MeTest股利。

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像素到200像素，從而在運行段待觀察。

更新

我看到，在我對報告的第一個問題，你改成顯示在HTML DOM來阻止 - 當我打電話的CSS 樣式表元素和顯示更改爲阻止，它不會那樣工作。任何想法爲什麼它發生？

它不起作用，因爲該元素的顯示屬性是由樣式表強加，它不包含在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

來源

2017-03-14 09:32:52 Christos

這是完美的Christos！非常感謝！ – Rehan

快速提問：我們可以使用此方法更改多個元素的Css屬性嗎？示例：如果我在'MeTest'類元素內創建多個（幾乎9個元素）元素，然後在J Script中只更改該數組的5個元素的顏色？這將是非常有益的 - 在此先感謝！ – Rehan

是的，這可以完成。您應該閱讀有關css選擇器的信息，以瞭解我們如何選擇父元素的子元素。例如，如果你想抓住一個div的所有段落元素，你可以嘗試像這樣'document.querySelectorAll（「div> p」）; '。如果你想用類MeTest抓住div中包含的所有段落元素，你可以試試這個'document.querySelectorAll（「div.MeTest> p」）;'。有關此方法的更多信息，請參閱https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll。 – Christos

var x = document.getElementsByClassName（「MeTest」）[0];如果（getComputedStyle（x）.getPropertyValue（「display」）=='block'） document.getElementsByClassName（「haveIt」）[1] .style.backgroundColor =「red」; }

來源

2017-03-14 10:15:58

其實，你有一個「haveIt」類的div。因此你應該使用'document.getElementsByClassName（「haveIt」）[0] .style.backgroundColor =「red」;'而不是'document.getElementsByClassName（「haveIt」）[1] .style.backgroundColor =「red」;' –

這是一個很好的建議Sumit - 使用ComputedStyle將是一個好主意。謝謝！ – Rehan

陣列不能使用If語句

回答

相關問題