如何设置在输入字段 type=text 中输入并使用按钮添加的（css）文本？答案

【问题标题】：How to style (css) text that was entered in input field type=text and added with button?如何设置在输入字段 type=text 中输入并使用按钮添加的（css）文本？
【发布时间】：2020-09-05 14:57:16
【问题描述】：

我对网页设计和编程非常陌生，并且有一个问题。我正在使用 javascript、html 和 css 开发待办事项列表，并且我能够成功地将输入字段连接到“添加”按钮并拥有它，以便在单击按钮时输入的内容出现在列表中。现在我想使用 css 设置文本样式。如何设置输入字段中的文本样式？正如我所说，我希望我输入的文本在我按下列表中的按钮后出现。

html: [1]：https://i.stack.imgur.com/ZXSAh.png

javascript：

function myFunction() {
var li = document.createElement("li");
var inputValue = document.getElementById("input").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
  alert("You must write something!");
} else {
  document.getElementById("myUL").appendChild(li);
}
document.getElementById("input").value = "";

var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);

for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

}

【问题讨论】：

恐怕我的问题措辞不正确，但感谢您的回答！我知道如何设置输入字段内的文本样式。我想知道在输入字段中输入文本并通过函数添加按钮后，如何设置将出现在列表中的文本的样式。
我不确定你的意思——你的意思是你想选择所有的 li 项目并应用样式在列表创建之后？最好的方法是在创建列表项时应用 CSS 类（这与使用类手动创建 HTML 的效果完全相同）。然后样式由类而不是 JS 控制，您可以使用它来设置任何您想要的样式:) 请参阅下面的答案:)

标签： javascript html css button

【解决方案1】：

最好的方法是设置一个可重用的 CSS 类并将它应用到你生成的元素上，例如

.newItem {
    color: blue;
}

（请注意，几乎总是建议对类等使用 CSS 规则而不是内联 CSS - 它更容易更改，并在其他地方重用以保持一致性。）

然后将其应用于您创建的li（或任何其他元素，例如跨度，具体取决于您想要的样式以及您希望类的可重用程度），例如

function myFunction() {
  var li = document.createElement("li");

  // add class to the li
  li.classList.add("newItem");

  // REST OF YOUR CODE
}

例如，如果您想设置 span 而不是 li 的样式，您可以将 class 添加到 span，或更改 CSS 规则以定位 span，例如

.newItem span { color:blue; }

（看看使用 CSS 更改是多么容易！:)）

工作示例：

function myFunction() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("input").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);

  // add class to the li
  li.classList.add("newItem");

  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("input").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

.newItem{ color:blue;}

<input type="text" id="input">
<span onclick="myFunction()" class="button">Add</span>

<ul id="myUL"></ul>

【讨论】：

【解决方案2】：

在span 元素上设置样式。

例如，您可以这样加粗： span.style.fontWeight = 'bold';

或者在你正在使用的close 类上设置 CSS，在<head> 中添加类似这样的内容：

<style>

span.close {
    font-weight: bold;
}

</style>

【讨论】：

【解决方案3】：

关于您的问题：我想使用 css 设置文本样式。如何设置输入字段中的文本样式？

<span onclick="myFunction()" class="button" style="color: orange; font-weight: bold;">Add</span>

你可以这样设计。

【讨论】：

【解决方案4】：

解决方案：

为了给输入中的内容设置样式，您必须使用这样的颜色属性：

input { /*Selects input*/
color: green /*Changes the color to green*/

}

&lt;input type="text" value="My text"/&gt;

【讨论】：