Как изменить дочерний контент 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 работает только в том случае, если ребенок является прямым дочерним элементом родителя. – Shilly

Вы можете использовать jquery? –

Вы можете использовать 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 loop

источник

2016-05-09 11:32:03

Основываясь на вашем css, я думаю, «доска» - это ваш идентификатор. Поэтому, пожалуйста, просто замените getElementsByTag("board") на getElementById("board")

источник

2016-05-09 11:34:22

Как изменить дочерний контент div?

ответ

Смежные вопросы