문제가 발생하여이 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/
업데이트 : 해결되었습니다, 감사합니다! 다음 은 업데이트 된 작업 코드입니다.
사용할 수 있으며 반환하기 때문에 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루프를
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다