Question

我正在使用应用程序前端开发并面临样式问题，当我试图使前面看起来很好。我有以下代码：

输入HTML和CSS（包括内联CSS和样式表）：这看起来很完美但没有数据，如title，startDate等是硬编码的。

<div class="rsvpEvent">                     
    <p style="text-align:center;"><b>title</b></p><p class="cancel">cancel</p>
    <div style="width:30%;height:68%;float:left;margin-left:2%;margin-right:2%;">
        <img class="backgroundImage" src="img/surf2.jpg">                       
    </div>
    <b style="color:#3ad7ff">3 friends <font face="ico" color="#ffffff">&#xe60a;</font> 9 others</b><br />
    startDate<b style="color:#3ad7ff;">15km</b>
    <div class="facebookBox"><font face="ico" style="position:relative;top:-6vh;left:1vw;">&#xe608;</font></div>
    <div class="twitterBox"><font face="ico" style="position:relative;top:-1vh;left:1vw;">&#xe609;</font></div>
    <img src="img/Tulips.jpg" class="profileBox" onclick="showProfilefromRSVP()">
    <div class="viewBox" onclick="showFeed()">view</div>
</div>

然后，我把它变成了带有writeln的javascript，它确实有title，startDate等数据，但是所有的样式都包含内联样式和样式表都不起作用。

xhr.onload=function(){
    result = JSON.parse(xhr.responseText);
    for(var i=0;i<result[0].length;i++){
        var title = result[0][i];
        var startDate = result[1][i];

        document.writeln("<div class=\"rsvpEvent\">");
        document.writeln("<p style=\"text-align:center;\"><b>"+title+"</b></p><p class=\"cancel\">cancel</p>");
        document.writeln("<div style=\"width:30%;height:68%;float:left;margin-left:2%;margin-right:2%;\">");
        document.writeln("<img class=\"backgroundImage\" src=\"img/surf2.jpg\">");
        document.writeln("</div>");
        document.writeln("<b style=\"color:#3ad7ff\">3 friends <font face=\"ico\" color=\"#ffffff\">&#xe60a;</font> 9 others</b><br />");
        document.writeln(startDate+"<b style=\"color:#3ad7ff;\">15km</b>");
        document.writeln("<div class=\"facebookBox\"><font face=\"ico\" style=\"position:relative;top:-6vh;left:1vw;\">&#xe608;</font></div>");
        document.writeln("<div class=\"twitterBox\"><font face=\"ico\" style=\"position:relative;top:-1vh;left:1vw;\">&#xe609;</font></div>");
        document.writeln("<img src=\"img/Tulips.jpg\" class=\"profileBox\" onclick=\"showProfilefromRSVP()\">");
        document.writeln("<div class=\"viewBox\" onclick=\"showFeed()\">view</div>");
        document.writeln("</div>");
    }
}

对此有何帮助？非常感谢！

Answer 1

在页面加载后使用document.write时，就像使用白板一样，它会擦除主板，让你重新开始。所以那里的所有代码都被删除了。您想使用DOM方法添加新内容。因此，您要使用innerHTML或appendChild()

xhr.onload = function() {
    result = JSON.parse(xhr.responseText);
    var content = [];
    for (var i = 0; i < result[0].length; i++) {
        var title = result[0][i];
        var startDate = result[1][i];
        content.push("<div class=\"rsvpEvent\">");
        content.push("<p style=\"text-align:center;\"><b>" + title + "</b></p><p class=\"cancel\">cancel</p>");
        content.push("<div style=\"width:30%;height:68%;float:left;margin-left:2%;margin-right:2%;\">");
        content.push("<img class=\"backgroundImage\" src=\"img/surf2.jpg\">");
        content.push("</div>");
        content.push("<b style=\"color:#3ad7ff\">3 friends <font face=\"ico\" color=\"#ffffff\">&#xe60a;</font> 9 others</b><br />");
        content.push(startDate + "<b style=\"color:#3ad7ff;\">15km</b>");
        content.push("<div class=\"facebookBox\"><font face=\"ico\" style=\"position:relative;top:-6vh;left:1vw;\">&#xe608;</font></div>");
        content.push("<div class=\"twitterBox\"><font face=\"ico\" style=\"position:relative;top:-1vh;left:1vw;\">&#xe609;</font></div>");
        content.push("<img src=\"img/Tulips.jpg\" class=\"profileBox\" onclick=\"showProfilefromRSVP()\">");
        content.push("<div class=\"viewBox\" onclick=\"showFeed()\">view</div>");
        content.push("</div>");
    }
    document.getElementById("outputElem").innerHTML = content.join("");
}

javascript document.writeln（）中的CSS不起作用

1 个答案: