Question

我遇到了一个问题而且我无法达到＆＃34;这个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/

更新：解决了，谢谢！ Here是更新的工作代码。

Answer 1

您可以使用querySelectorAll，然后您需要使用循环来更改每个孩子div的样式，因为它会返回NodeList

＆＃13;

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')";
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

您也可以使用Array.from()或Array.prototype.slice.call()然后使用forEach循环

Answer 2

基于你的css，我猜，＆＃34; board＆＃34;是你的身份。所以请将getElementsByTag("board")替换为getElementById("board")

如何更改div的子内容？

2 个答案: