简体   繁体   中英

How to append an Image on two or more dom elements?

I'm finishing up my battleship project and want to add ship images. Before if a player places a ship at a certain coordinate, I just change the color of the divs as an indication of ship being placed. Now I want to place ( append ) images dynamically.

            <div class="gameBoard">
                <div class="grid"></div>
                <div class="grid"></div>
                <div class="grid"></div>
                <div class="grid"></div>
                <div class="grid"></div>
                <div class="grid"></div>
            </div>

The div gameboard above represents my board in the dom. And each divs represent each individual boxs where the players will attack each other. So how can I add one images on lets say to or more divs, so that the image span across those divs.

Something like this?

function addImage(a,b){
   document.querySelectorAll(".grid")[a].style.background = "url(ship.jpg)"; 
   document.querySelectorAll(".grid")[b].style.background = "url(ship.jpg)";
}
<div class="grid" onclick='addImage(3,4)'></div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM