猿问

如何设置在输入字段 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";

  }

}

}


桃花长相依
浏览 111回答 4
4回答

Smart猫小萌

最好的方法是设置一个可重用的 CSS 类并将其应用于您生成的元素，例如.newItem {&nbsp; &nbsp; color: blue;}（请注意，几乎总是建议对类等使用 CSS 规则而不是内联 CSS - 它更容易更改，并且在其他地方重用以保持一致性。）然后将其应用于li您创建的（或任何其他元素，例如跨度，具体取决于您想要的样式以及您希望该类的可重用程度），例如function myFunction() {&nbsp; var li = document.createElement("li");&nbsp; // add class to the li&nbsp; li.classList.add("newItem");&nbsp; // REST OF YOUR CODE}例如，如果您想为 span 而不是 li 设置样式，您可以将类添加到 span，或者更改 CSS 规则以针对 span，例如.newItem span { color:blue; }（看看当你使用 CSS 时改变是多么容易！:)）工作示例：function myFunction() {&nbsp; var li = document.createElement("li");&nbsp; var inputValue = document.getElementById("input").value;&nbsp; var t = document.createTextNode(inputValue);&nbsp; li.appendChild(t);&nbsp; // add class to the li&nbsp; li.classList.add("newItem");&nbsp; if (inputValue === '') {&nbsp; &nbsp; alert("You must write something!");&nbsp; } else {&nbsp; &nbsp; document.getElementById("myUL").appendChild(li);&nbsp; }&nbsp; document.getElementById("input").value = "";&nbsp; var span = document.createElement("SPAN");&nbsp; var txt = document.createTextNode("\u00D7");&nbsp; span.className = "close";&nbsp; span.appendChild(txt);&nbsp; li.appendChild(span);&nbsp; for (i = 0; i < close.length; i++) {&nbsp; &nbsp; close[i].onclick = function() {&nbsp; &nbsp; &nbsp; var div = this.parentElement;&nbsp; &nbsp; &nbsp; div.style.display = "none";&nbsp; &nbsp; }&nbsp; }}.newItem{ color:blue;}<input type="text" id="input"><span onclick="myFunction()" class="button">Add</span><ul id="myUL"></ul>
0

炎炎设计

关于您的问题：我想使用 css 设置文本样式。如何设置输入字段中文本的样式？<span&nbsp;onclick="myFunction()"&nbsp;class="button"&nbsp;style="color:&nbsp;orange;&nbsp;font-weight:&nbsp;bold;">Add</span>你可以像这样的风格。
0

MM们

解决方案：要对输入中的内容进行样式设置，您必须使用像这样的颜色属性：input { /*Selects input*/color: green /*Changes the color to green*/}<input type="text" value="My text"/>
0

HUH函数

在元素上设置样式span。例如，您可以通过这种方式将其设为粗体： span.style.fontWeight = 'bold';或者在close你正在使用的类上设置 CSS，方法是将如下内容放入<head>：<style>span.close {&nbsp; &nbsp; font-weight: bold;}</style>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答