javascript - createElement background image - Stack Overflow

admin管理员组

文章数量:1426959

I am trying to create a table width javascript and createElement(). My problem is that it does not set any background image (just plain white). However, if I set the innerHTML of the to an image tag with same path, it works!

create : function () {
    var tbody = document.createElement('tbody');
    for(i in this.map) {
        var tr = document.createElement('tr');
        for(j in this.map[i]) {
            var td = document.createElement('td');
            var cell = this.map[i][j];
            td.style.color = "red";
            console.log("gfx/tile_"+this.backgrounds[cell]+".png");
            td.style.backgroundImage = "url(gfx/tile_"+this.backgrounds[cell]+".png);";
            td.innerHTML = "j";
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }
    this.gameDOMelm.appendChild(tbody);
}

I also have another problem that there's space between each ROW in the table. Here's the DOM Element I'm appending to:

<table id="gameField" cellpadding="0" cellspacing="0"></table>

And the CSS

    * {padding: 0; margin: 0;}
    td {
        min-width: 32px;
        min-height: 32px;
        width: 32px;
        height: 32px;
    }

These problems occur both in Chrome and FF @ ubuntu 11.04. No errors shows in javascript console.

• jack

I am trying to create a table width javascript and createElement(). My problem is that it does not set any background image (just plain white). However, if I set the innerHTML of the to an image tag with same path, it works!

create : function () {
    var tbody = document.createElement('tbody');
    for(i in this.map) {
        var tr = document.createElement('tr');
        for(j in this.map[i]) {
            var td = document.createElement('td');
            var cell = this.map[i][j];
            td.style.color = "red";
            console.log("gfx/tile_"+this.backgrounds[cell]+".png");
            td.style.backgroundImage = "url(gfx/tile_"+this.backgrounds[cell]+".png);";
            td.innerHTML = "j";
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }
    this.gameDOMelm.appendChild(tbody);
}

I also have another problem that there's space between each ROW in the table. Here's the DOM Element I'm appending to:

<table id="gameField" cellpadding="0" cellspacing="0"></table>

And the CSS

    * {padding: 0; margin: 0;}
    td {
        min-width: 32px;
        min-height: 32px;
        width: 32px;
        height: 32px;
    }

These problems occur both in Chrome and FF @ ubuntu 11.04. No errors shows in javascript console.

• jack

• javascript
• background-image
• createelement

Share Improve this question Follow asked May 15, 2011 at 12:42 jackjack 1,31711 gold badge1414 silver badges2121 bronze badges 2

• What CSS do you see in Firebug? – SLaks Commented May 15, 2011 at 12:46
• I see the "color:red;" is applied. I see the one a posted in question. No background image however. – jack Commented May 15, 2011 at 12:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Try "url('gfx/tile_"+this.backgrounds[cell]+".png')" (with single quotes around the URL).

本文标签： javascriptcreateElement background imageStack Overflow