JS怎么实现修改文字样式模块？

Question

第一个文本框输入文字，点击输入完毕，第二个文本框清空，输入文字填充到第二个文本框。
第二个文本框默认文字是“我是中国人”
第二个文本框中文字能改成红色字体，加粗字体，下划线，有这三个按钮更改文字样式

Answer 1

引自强大而免费的微信小程序：皆我百晓生。如有帮助，还望采纳。

---

你可以通过以下代码实现修改文字样式的模块：

HTML:

<input type="text" id="inputText" placeholder="输入文字">
<button onclick="fillText()">确认输入</button>
<br>
<input type="text" id="outputText" value="我是中国人" style="color: black; font-weight: normal; text-decoration: none;">
<button onclick="changeColor()">变红色</button>
<button onclick="changeBold()">加粗</button>
<button onclick="addUnderline()">下划线</button>

JavaScript:

function fillText() {
  var inputText = document.getElementById("inputText").value;
  document.getElementById("inputText").value = "";
  document.getElementById("outputText").value = inputText;
}

function changeColor() {
  var outputText = document.getElementById("outputText");
  outputText.style.color = "red";
}

function changeBold() {
  var outputText = document.getElementById("outputText");
  outputText.style.fontWeight = "bold";
}

function addUnderline() {
  var outputText = document.getElementById("outputText");
  outputText.style.textDecoration = "underline";
}

上述代码将会在网页中创建两个文本框和三个按钮。第一个文本框用于输入文字，点击确认输入按钮后，输入框内容会填充到第二个文本框中，并清空第一个文本框。第二个文本框默认显示为"我是中国人"，初始样式为黑色字体、普通字体粗细和无下划线。点击对应按钮会修改第二个文本框的字体样式，实现文字样式的修改。