CSS圖像爲JavaScript，爲圖像賦值並添加它們

Question

我有一個數字遊戲，其中有一個4x4板。對於第1行，每個塊的名稱是board11，board12，board13，board14。事情就是這樣。 然後在每個塊上是一個來自css的png圖像。 這裏的CSS代碼片段：

div#gamearea4x4 div.row1#board11{ 
    background-image: url(../graphics/9.png); //images are from 1.png to 9.png 
    width: 50px; 
    height: 50px; 

每個塊的圖像可以改變。隨機化將在JavaScript中完成。 我想要做的是從CSS獲取背景圖像到JavaScript，給它分配一個值（1.png是1，2.png是2等），以便每次我單擊塊/圖像時，它會顯示在我的記分板上（值+ 5）。所以點擊7.png會給我12分。

我的主要問題是，我不知道我怎麼可以從CSS獲取圖像並分配值。 這是我迄今（JavaScript的）：

function StartGame() { 

///// this function gets the board id(loop) and assigns a random img to it 

    for (i = 0; i < 4; i++) { 
     for (j = 0; j < 4; j++) { 
     var id = 'board' + (i + 1) + (j + 1); //loop for the board id 

     var w = val[Math.floor(Math.random()*img.num.length)]; //getting a random value 

     var obj = document.getElementById(id); 
     var uu = 'url(graphics/' + w + '.png)'; //random image generated from random value 

     document.getElementById(id).style.backgroundImage = uu; //setting it as the id's image 

     } 
    } 

當點擊圖像/塊：

function ImageOnClick(target) { 
///// this function will calculate the score 

    var vvv = document.getElementById(target).style.backgroundImage; //gets targeted id 

    document.getElementById(target).style.display='none'; //img disappears when clicked 
    score = score + 5; // incomplete equation. var score defined on top. 
    document.getElementById('scoreval').innerHTML= score ; 
} 

這裏是HTML的代碼片段：

<div id="gamearea4x4"> 

     <div class="row1" id="board11" onmouseover="ImageOnHover(this.id)" onmouseout="ImageOnOut(this.id)" onclick="ImageOnClick(this.id)"></div> 
     <div class="row1" id="board12" onmouseover="ImageOnHover(this.id)" onmouseout="ImageOnOut(this.id)" onclick="ImageOnClick(this.id)"></div>) 
     <div class="row1" id="board13" onmouseover="ImageOnHover(this.id)" onmouseout="ImageOnOut(this.id)" onclick="ImageOnClick(this.id)"></div> 

任何幫助非常感謝！謝謝！

Answer 1

使用屬性

function StartGame() { 
for (i = 0; i < 4; i++) { 
     for (j = 0; j < 4; j++) { 
     var id = 'board' + (i + 1) + (j + 1); //loop for the board id 

     var w = val[Math.floor(Math.random()*img.num.length)]; //getting a random value 

     var obj = document.getElementById(id); 
     var uu = 'url(graphics/' + w + '.png)'; //random image generated from random value 

     document.getElementById(id).style.backgroundImage = uu; //setting it as the id's image 
     document.getElementById(id).setAttribute("data-position", w);//set the attribute 
     } 
} 
} 

function ImageOnClick(target) { 
///// this function will calculate the score 

    var vvv = document.getElementById(target).getAttribute("data-position") //gets targeted id 

    document.getElementById(target).style.display='none'; //img disappears when clicked 
    score = score + 5; // incomplete equation. var score defined on top. 
    document.getElementById('scoreval').innerHTML= score ; 
} 

Answer 2

我的主要問題是，我不知道我怎麼可以從CSS圖像和分配值。

如果正確地解釋問題，您可以使用window.getComputedStyle()，String.prototype.replace()檢索cssbackground-image財產與RegExp/^url(?=\()|\(|\)|"/

window.onload = function() { 
 

 
var elem = document.getElementById("board11"); 
 
var url = window.getComputedStyle(elem).getPropertyValue("background-image"); 
 
console.log(url.replace(/^url(?=\()|\(|\)|"/g, "")); 
 
    }

div#gamearea4x4 div.row1#board11 { 
 
    background-image: url(http://lorempixel.com/1/1); //images are from 1.png to 9.png 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div id="gamearea4x4"> 
 
    <div class="row1" id="board11"></div> 
 
</div>