我正在尝试构建具有20x20px正方形浏览器窗口大小的网格。我的第一个想法是使用以下代码构建一个表,但是IE8(以任何方式)都不会呈现单元格,除非它们具有非空白内容。根据this,它将具有 ,但是根据我的测试,仅当表位于原始DOM中时,它才有效-而不是来自javascript。


dojo.ready(function(){
    var grid = dojo.byId("grid");
    var tr;
    for(var i=0; i<20; i++) {
        tr = dojo.create("tr", null, grid);
        for(var j=0; j<20; j++) {
            var td =dojo.create("td", {innerHTML: "&nbsp;"}, tr);
            dojo.style(td, {border: "solid", height: "20px", width: "20px"});
        }
    }
});
...
<table id="grid" style="border-collapse: collapse;"></table>


放弃这种方法后,我决定尝试使用google-closure的矢量图形库-原则上认为矢量绘图将是更合适的解决方案,因为表格并非为此目的而设计的。网格(例如1000x1000)的加载时间和内存利用率非常高。我想它也并非设计用于此目的:


var graphics = goog.graphics.createGraphics(800, 800);
var path, stroke = new goog.graphics.Stroke(1, "gray");

for(var x=0; x<65; x++) {
 for(var y=0; y<65; y++) {
     path = new goog.graphics.Path();
     path.moveTo(0, y*20);
     path.lineTo(800, y*20);
     graphics.drawPath(path, stroke);

     path = new goog.graphics.Path();
     path.moveTo(x*20, 0);
     path.lineTo(x*20, 800);
     graphics.drawPath(path, stroke);
 }
}

graphics.render(document.byId("grid"));
...



也许实用的解决方案是创建20x20px的图像并反复插入?

最佳答案

是否必须以编程方式进行?因为使用20x20像素GIF作为背景图像,并且在左右两侧都有一行,所以您需要在五分钟内完成操作。它是跨浏览器,也可以在广阔的领域使用。

编辑:问题末尾已经有了这个想法。是的,我认为这是最简单的方法。

关于javascript - 如何以编程方式创建20x20px的单元格网格背景?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/1960371/

10-09 09:57