CSS图像到javascript，为图像赋值并添加它们

我有一个数字游戏，里面有一个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）：

以下是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>

)

任何帮助都将不胜感激！谢谢大家!

使用属性

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 ;
}

函数startName（）{
对于（i=0；i<4；i++）{
对于（j=0；j<4；j++）{
var id='board'+（i+1）+（j+1）；//board id的循环
var w=val[Math.floor（Math.random（）*img.num.length）]；//获取一个随机值
var obj=document.getElementById（id）；
var uu='url（graphics/'+w+'.png）；//由随机值生成的随机图像
document.getElementById（id）.style.backgroundImage=uu；//将其设置为id的图像
document.getElementById（id）.setAttribute（“数据位置”，w）；//设置属性
}
}
}
函数ImageOnClick（目标）{
/////此函数将计算分数
var vvv=document.getElementById（目标）.getAttribute（“数据位置”）//获取目标id
document.getElementById（target.style.display='none'；//单击时img消失
score=score+5；//方程不完整。顶部定义了var分数。
document.getElementById（'scoreval'）。innerHTML=score；
}

我的主要问题是我不确定如何从css中获取图像并分配值

如果正确解释问题，您可以使用

window.getComputedStyle（）

，

String.prototype.replace（）

使用

RegExp

/^url（？=\（）\\（\\\）\”/

window.onload=function（）{
var elem=document.getElementById（“board11”）；
var url=window.getComputedStyle（elem.getPropertyValue（“背景图像”）；
console.log（url.replace（/^url（？=\（）\（\\）\）\“/g，”）；
}

div#gamearea4x4 div.row1#board11{
背景图片：url(http://lorempixel.com/1/1)；//图像从1.png到9.png
宽度：50px；
高度：50px；
}

javascript的哪个部分试图从

css

检索

背景图像

？您是否可以在问题中包括

html

？在哪里定义了

score

呢？css的最顶端有一个var分数，在html中有一个名为“scoreval”的div id

 <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>

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 ;
}