如何在JavaScript中修改随机输出文本的颜色、大小与对齐方式

你需要给随机输出的文本包裹HTML元素，通过元素的样式来控制颜色、大小和对齐。原来的代码直接输出纯文本，没有容器，所以无法设置样式。以下是几种可行方案：

方案1：内联样式直接包裹 #

修改输出文本的JS代码，把内容放在带style属性的标签里，直接定义样式：

document.write('<div style="color: #ff4444; font-size: 24px; text-align: center;">' + sentences[Math.floor(Math.random()*sentences.length)] + '</div>');

参数说明：

• color：设置文本颜色，支持十六进制、RGB、颜色名（比如red）
• font-size：设置字体大小，单位可以是px、em、rem
• text-align：设置对齐方式，可选left/center/right/justify

方案2：用CSS类控制样式（推荐，样式和逻辑分离） #

先在页面头部的<style>标签里定义样式类：

.header-random-text {
  color: #228b22;
  font-size: 18px;
  text-align: right;
  font-weight: bold; /* 可选：加粗文本 */
  font-family: "微软雅黑", sans-serif; /* 可选：设置字体 */
}

然后修改JS输出代码，给文本包裹带类的标签：

document.write('<div class="header-random-text">' + sentences[Math.floor(Math.random()*sentences.length)] + '</div>');

方案3：DOM操作（更灵活，避免document.write的弊端） #

如果页面加载完成后可能动态更新文本，推荐用DOM操作替代document.write（document.write在页面加载完成后会覆盖整个页面）。

1. 先在页面头部位置添加一个容器标签：

<div id="random-sentence-box"></div>

2. 修改JS代码，获取容器并设置内容和样式：

// 获取容器元素
var sentenceBox = document.getElementById('random-sentence-box');
// 随机选句子
var randomText = sentences[Math.floor(Math.random()*sentences.length)];
// 设置文本内容
sentenceBox.textContent = randomText;
// 设置样式（或者直接加CSS类）
sentenceBox.style.color = '#0066cc';
sentenceBox.style.fontSize = '20px';
sentenceBox.style.textAlign = 'justify';

也可以给容器加CSS类来复用样式：

sentenceBox.classList.add('header-random-text');

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .header-random-text {
      color: #e67e22;
      font-size: 22px;
      text-align: center;
      font-family: Arial, sans-serif;
      margin: 10px 0;
    }
  </style>
  <script type="text/javascript">
    var sentences = new Array(
      "Best site in rsms",
      "Please give us game ideas!",
      "On currents :))",
      "Games for fun?",
      "No u",
      "Pls",
      "HUH?"
    );
  </script>
</head>
<body>
  <!-- 使用CSS类的方案 -->
  <script type="text/javascript">
    document.write('<div class="header-random-text">' + sentences[Math.floor(Math.random()*sentences.length)] + '</div>');
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者0rca