如何更改div的子內容？

我遇到了一個問題，我不能「達到」這個div的孩子：如何更改div的子內容？

<style type="text/css"> 
div#memory_board{ 
    background:#CCC; 
    border:#999 1px solid; 
    width:800px; 
    height:540px; 
    padding:24px; 
    margin:0px auto; 
} 
div#memory_board > div{ 
    background: url(http://image.png) no-repeat center; 
    border:#000 1px solid; 
    width:71px; 
    height:71px; 
    float:left; 
    margin:10px; 
    padding:20px; 
    font-size:64px; 
    cursor:pointer; 
    text-align:center; 
} 
</style>

我所試圖做的是改變所有div#board > div的背景與按鈕。

我嘗試這樣做：

function imageChange(){ 
document.getElementsByTag("memory_board").style.background="url(http://image.png)"; 
}

不過，當然，這是行不通的。我嘗試過各種組合，但似乎沒有任何工作。有小費嗎？（我有一個按鈕，調用函數後，這樣是絕對沒有問題的！）

這是全碼： https://jsfiddle.net/o72z8dqv/

UPDATE：解決，謝謝！ Here是更新的工作代碼。

來源

2016-05-09 Intai' sei

您是否也可以添加html部分。這會更有幫助 –

創建第二個類並切換類？此外，如果您將規則一個父母，您只需要更改父母班級而不是每個孩子。如果您無法接觸到孩子，也許在您嘗試定位的div之前有多個嵌套：parent> child只在孩子是父母的直接孩子時才起作用。你可以使用jquery嗎？ – Shilly

？ –

您可以使用querySelectorAll，然後你需要使用循環來改變每個孩子div的風格，因爲它返回NodeList

function imageChange() { 
 
    var divs = document.querySelectorAll("#board > div"); 
 
    for (var i = 0; i < divs.length; i++) { 
 
    divs[i].style.backgroundImage = "url('http://placehold.it/350x150/333333')"; 
 
    } 
 
}

div#board > div { 
 
    background: url('http://placehold.it/350x150/ffffff') no-repeat center; 
 
    border: #000 1px solid; 
 
    width: 71px; 
 
    height: 71px; 
 
    float: left; 
 
    margin: 10px; 
 
    padding: 20px; 
 
    font-size: 50px; 
 
    text-align: center; 
 
}

<button onclick="imageChange()">BUtton</button> 
 
<div id="board"> 
 
    <div>Div</div> 
 
    <div>Div</div> 
 
</div>

您還可以使用Array.from()或Array.prototype.slice.call()，然後你可以使用forEach循環

來源

2016-05-09 11:32:03

根據你的CSS，我猜，「板」是你的ID。所以請只替換getElementsByTag("board")通過getElementById("board")

來源

2016-05-09 11:34:22

如何更改div的子內容？

回答

相關問題