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

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

html: [1] :

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";
  }
}

函数myFunction（）{
var li=document.createElement（“li”）；
var inputValue=document.getElementById（“输入”）.value；
var t=document.createTextNode（inputValue）；
li.儿童（t）；
如果（inputValue==''）{
警惕（“你必须写点什么！”）；
}否则{
文件.getElementById（“myUL”）.appendChild（li）；
}
document.getElementById（“输入”）.value=“”；
var span=document.createElement（“span”）；
var txt=document.createTextNode（“\u00D7”）；
span.className=“关闭”；
span.appendChild（txt）；
李.儿童（span）；
对于（i=0；i

---

}

在

span

元素上设置样式

例如，可以通过以下方式将其加粗：

span.style.fontwweight='bold'

或者在您正在使用的
close
类上设置CSS，方法是在
中放置类似的内容：


span.close{
字体大小：粗体；
}
关于您的问题：我想使用css设置文本样式。如何从输入字段设置文本样式

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

添加

您可以这样设计。
解决方案：

要设置输入中内容的样式，必须使用如下颜色属性：


input{/*选择输入*/
颜色：绿色/*将颜色更改为绿色*/
}
实现这一点的最佳方法是设置一个可重用的CSS类，并将其应用于生成的元素，例如

.newItem {
    color: blue;
}

（请注意，与内联CSS相比，几乎总是建议对类等使用CSS规则，因为这样更易于更改，并在其他地方重用以保持一致性。）

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

例如，如果您想为span而不是li设置样式，您可以将类添加到span，或者更改CSS规则以针对span，例如

.newItem span { color:blue; }

（看看当你使用CSS时，改变是多么容易！）

工作示例：


函数myFunction（）{
var li=document.createElement（“li”）；
var inputValue=document.getElementById（“输入”）.value；
var t=document.createTextNode（inputValue）；
li.儿童（t）；
//向li添加类
li.classList.add（“newItem”）；
如果（inputValue==''）{
警惕（“你必须写点什么！”）；
}否则{
文件.getElementById（“myUL”）.appendChild（li）；
}
document.getElementById（“输入”）.value=“”；
var span=document.createElement（“span”）；
var txt=document.createTextNode（“\u00D7”）；
span.className=“关闭”；
span.appendChild（txt）；
李.儿童（span）；
对于（i=0；i

.newItem{color:blue；}

添加
恐怕我的问题用词不对，但谢谢你的回答！我知道如何在输入字段中设置文本样式。我想知道在输入字段中输入文本并通过函数添加按钮后，如何设置列表中显示的文本的样式。我不确定您的意思-您的意思是在创建列表后选择所有li项并应用样式吗？最好的方法是在创建列表项的位置应用CSS类（这与使用类手动创建HTML的效果完全相同）。然后样式由类控制，而不是由JS控制，您可以使用它以任何方式对其进行样式设置：）请参见下面的答案：）
function myFunction() {
  var li = document.createElement("li");

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

  // REST OF YOUR CODE
}

.newItem span { color:blue; }