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

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

我对网页设计和编程非常陌生，并且有一个问题。我正在开发使用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";
  }
}

}

解决方法

执行此操作的最佳方法是设置一个可重用CSS类，并将其应用于您生成的元素，例如

.newItem {
    color: blue;
}

（请注意，几乎总是建议将CSS规则用于类等，而不是内联CSS，因为更改起来很容易，并且在其他地方可以重复使用以保持一致性。）

然后将其应用于您创建的li（或其他元素，例如span，具体取决于您要设置的样式以及类的可重用性），例如

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

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

  // REST OF YOUR CODE
}

例如，如果要设置跨度而不是li的样式，则可以将类添加到跨度，或更改CSS规则以跨度为目标，例如

.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>

在span元素上设置样式。

例如，您可以通过以下方式使其变为粗体： span.style.fontWeight = 'bold';

或通过在close中放置类似内容，在使用的<head>类上设置CSS：

<style>

span.close {
    font-weight: bold;
}

</style>

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

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

您可以这样设置样式。

解决方案：

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

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

}

<input type="text" value="My text"/>

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

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

解决方法

相关推荐