Question

var width = prompt("How many x's would you like in the bottom row? 1-100 is good)", "50")
var a_line= "";
var loop = 0;

while (loop < width) {
    a_line = a_line + "x";
    loop = loop + 1;
    document.writeln(a_line + "<br>");
}

这使得第一行上的1 x打印在第2行上2 x，依此类推，直到用户给出的x的数量。

如何将样式应用于document.writeln(a_line + "<br>")的结果？即以每条线为中心。

Answer 1

document.write("<div style='..........'">");
while( loop < width) { .....}
document.write("</div>");

这样的事情。虽然你应该避免使用document.write。

Answer 2

将a_line包含在应用了某些css的段落（<p> tag）中。

while (loop < width) {
 a_line += "x";
 b_line = "<p style='text-align:center;width:100%;'>" + a_line + "</p>";
 loop = loop + 1;
 document.writeln(b_line);
}

Answer 3

你应用CSS应用于使用正确的方法将html插入页面，这是通过不使用document.writeln，而是通过选择基于id或css选择器放置内容的元素： / p>

document.getElementById（'...'）。innerHTML =“＆lt; p class ='css-class'＆gt; ...＆lt; / p＆gt;”;
document.querySelector（'...'）。innerHTML =“＆lt; p class ='css-class'＆gt; ...＆lt; / p＆gt;”;
使用MooTools / jQuery / etc选择元素，然后设置内容。

JavaScript的document.writeln不打印HTML，但打印纯文本内容，因此浏览器永远不会解释它。构建你的字符串，然后使用.innerHTML（纯JavaScript）或.html（）（在jQuery中）等将它注入到你想要的元素中。

Answer 4

将HTML应用于字符串中的x，如下所示：

var width = +prompt("How many x's would you like in the bottom row? 1-100 is good)", "50"),
    a_line = "",
    loop = 0;

while (loop < width) {
    a_line += "x";
    loop += 1;
    document.writeln('<center>' + a_line + '</center><br />');
}

Answer 5

您不应使用document.write/ln修改网页。页面基于Document Object Model显示，http://jsfiddle.net/hQHHu/是元素树，而不是纯文本。您应该为每一行创建一个元素，为每个行提供必要的文本内容并添加到文档中：

var width = prompt("How many x's would you like in the bottom row? 1-100 is good)", "50"),
    a_line = "",
    loop = 0,
    element;

while (loop < width) {
    a_line = a_line + "x";
    loop = loop + 1;
    element = document.createElement("div");
    element.appendChild(document.createTextNode(a_line));
    document.body.appendChild(element);
}

CSS：

div {
    text-align:center;
}

演示：{{3}}

将css应用于javascript document.writeln（）

5 个答案: