Question

我正在开发一个由Javascript生成的简单记忆游戏。我们的想法是创建4行24个按钮，每个按钮6个按钮。为此，我使用以下代码：

function shuffle(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

var buttons = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24];

function playGame(){
    shuffle(buttons);

    for(i = 0; i < buttons.length; i++){
        document.write("<a href='#' class='btn_Numbers'>" + buttons[i] + "</a>");
        if(i == 5 || i == 11 || i == 17 || i == 23){
            document.write('<br />');
        }
    }
}

除了生成的超链接完全忽略CSS类btn_Numbers之外，这完全正常。当我手动编写这样的超链接时，它可以很好地工作。

我觉得这是因为在内容存在之前加载了CSS。我隐约记得几年前发生在我身上的事情。但我真的不记得如何解决这个问题。所以任何帮助都将不胜感激！

Answer 1

不，事实并非如此。使用document.write会删除页面上的所有其他内容（包括样式表），因此虽然看起来CSS不适用，但是因为没有CSS，因为调用document.write已将其删除。

Answer 2

您可以使用此链接添加指向HTML的链接，而无需使用document.write删除所有其他内容：

var elm = document.getElementById("someID");
var link = document.createNode("a");

link.text = "Some text"
link.setAttribute("class", "btn_Numbers");
link.setAttribute("href", "#");

elm.appendChild(link)

上面的代码会将您创建的节点附加到您的页面而不删除任何其他内容。

使用Javascript生成的内容会忽略CSS类？

2 个答案: