Wie ändert man den Kind-Inhalt eines div?

Ich lief in ein Problem, und ich bin nicht in der Lage dieses div um das Kind zu „erreichen“:Wie ändert man den Kind-Inhalt eines 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>

Was ich versuche, den Hintergrund aller div#board > div mit einem Knopf zu tun ist, ändern.

Ich versuchte dies:

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

Aber natürlich ist es nicht funktioniert. Ich habe verschiedene Kombinationen ausprobiert, aber nichts scheint zu funktionieren. Irgendwelche Tipps? (Ich eine Taste, die die Funktion später ruft so das ist definitiv nicht das Problem!)

Dies ist der vollständige Code: https://jsfiddle.net/o72z8dqv/

UPDATE: gelöst, Dank! Here ist der aktualisierte Arbeitscode.

Quelle

2016-05-09 Intai' sei

können Sie den HTML-Teil auch hinzufügen. Das wird hilfreicher sein –

Erstellen Sie eine zweite Klasse und wechseln Sie einfach die Klassen? Wenn Sie die Regel eins zum übergeordneten Element hinzufügen, müssen Sie nur die Elternklasse anstelle jedes untergeordneten Objekts ändern. Wenn Sie das Kind nicht erreichen können, gibt es möglicherweise mehrere Verschachtelungen vor dem div, auf das Sie zielen möchten: parent> child funktioniert nur, wenn child direkt untergeordnet ist. – Shilly

können Sie jquery verwenden? –

können Sie querySelectorAll verwenden und dann müssen Sie Schleife verwenden Stil jedes Kind zu ändern div, weil es gibt 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>

Sie auch Array.from() oder Array.prototype.slice.call() verwenden können, und dann können Sie Verwenden Sie forEach Schleife

Quelle

2016-05-09 11:32:03

Basierend auf Ihrem CSS, ich denke, "Board" ist Ihre ID. Also bitte ersetzen Sie einfach getElementsByTag("board") durch getElementById("board")

Quelle

2016-05-09 11:34:22

Wie ändert man den Kind-Inhalt eines div?

Antwort

Verwandte Themen