javascript中的换行符/样式文本？答案

【问题标题】：line breaks/ styling text from javascript?javascript中的换行符/样式文本？
【发布时间】：2013-05-17 13:28:10
【问题描述】：

首先，这可能有点长。我正在尝试使用 javascript 制作 RPG 文本游戏。

在我的 HTML 中，我只有 html、head、css、body、div 和 script 标签。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="story_css.css">
</head>
<body>
<div class="container">
<script src="story_js.js"></script>
</div>
</body>
</html>

所以这将纯粹是我的游戏信息的容器。

然后我有我的javascript：

var ATTACK = 0;
var STRENGTH = 0;
var DEFENSE = 0;
var RANGED = 0;
var MAGIC = 0;
var AGILITY= 0;
var HEALTH = 0;
var CLASS = prompt("Choose a class (class only effects starting stats, but all classes can learn the same abilities at the same rate):Warrior, Mage, Theif, Archer.").toUpperCase();
switch (CLASS){
    case "WARRIOR":
        ATTACK = 16;
        STRENGTH = 18;
        DEFENSE = 17;
        RANGED = 2;
        MAGIC = 2;
        AGILITY = 5;
        HEALTH = 200;
        break;

    case "ARCHER":
        ATTACK = 6;
        STRENGTH = 5;
        DEFENSE = 11;
        RANGED = 20;
        MAGIC = 3;
        AGILITY = 15;
        HEALTH = 175;
    break;
}

document.write("These are the levels for each of your characters skills. You may write these down and keep track of them, but the game will automatically record your progress for you. However, you will not be able to see your levels until you type a command that asks for them, or if you require a certain level to complete a task.")
var  NAME = prompt("Enter your name:");

confirm("You are about to embark on an epic quest... so, " + NAME + " are you ready to begin?");

document.write("It is the year 3355, according to the Delil calendar, and you awake from your night's sleep. Today is a special day. It is your 18th birthday! In your small village of Shadowhollow, you are one of the 23 people who live there. But as of today, you are one of the villages men.");

我的问题是，当 javascript 执行 document.write 部分时，它只是将其作为一大段文本，即使它们来自不同的提示。有人可以帮助我并告诉我如何设计它吗？

【问题讨论】：

你应该改用.innerHTML而不是document.write()。
createElement 也被推荐
停止使用document.write()！你不会对它感到满意，因为它没有做你认为它做的事情。最重要的是，它会覆盖整个页面的内容，删除所有内容，包括您正在运行的脚本。

标签： javascript css text styling

【解决方案1】：

document.write("<h2>A sample heading</h2>\
<p>These are the levels for each of your characters skills.\
You may write these down and keep track of them, but the game will automatically record your progress for you.\
However, you will not be able to see your levels until you type a command that asks for them, \
or if you require a certain level to complete a task.</p>");
var  NAME = prompt("Enter your name:");

confirm("You are about to embark on an epic quest... so, " + NAME + " are you ready to begin?");

document.write("<h2>A sample heading</h2>\
<p>It is the year 3355, according to the Delil calendar, and you awake from your night's sleep. \
Today is a special day. It is your 18th birthday! In your small village of Shadowhollow, you are one of the 23 people who live there. \
But as of today, you are one of the villages men.</p>");

您可以使用 backslash 在 javascript 中将字符串拆分为不同的行。

您可以使用不同的文本标记标签，例如<p> 用于段落<h1> 用于标题1 等来设置文本样式，而这又是HTML 的一部分。更多造型可以关注css。

如果您想在 javascript 中使用换行符，请使用 \n 或 \t 作为制表符。这仅用于输出格式。

如果您想在HTML 结果中出现换行符，请使用<br>

此外，document.write 方法已被弃用且不推荐，如果你对你的编程很认真。你必须求助于更好的 DOM 操作方法，例如 document.createElement appendChild 等动态创建文档。

Dynamically create a HTML form with Javascript

【讨论】：

【解决方案2】：

为什么不用 HTML 来组织文本？：

document.write('<p>...</p>');
...
document.write('<p>...</p>');

【讨论】：