如何设置在输入字段 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";
}
}
}
桃花长相依4回答
-
Smart猫小萌
最好的方法是设置一个可重用的 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 设置样式，您可以将类添加到 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> -
炎炎设计
关于您的问题：我想使用 css 设置文本样式。如何设置输入字段中文本的样式？<span onclick="myFunction()" class="button" style="color: orange; font-weight: bold;">Add</span>你可以像这样的风格。 -
MM们
解决方案：要对输入中的内容进行样式设置，您必须使用像这样的颜色属性：input { /*Selects input*/color: green /*Changes the color to green*/}<input type="text" value="My text"/> -
HUH函数
在元素上设置样式span。例如，您可以通过这种方式将其设为粗体： span.style.fontWeight = 'bold';或者在close你正在使用的类上设置 CSS，方法是将如下内容放入<head>：<style>span.close { font-weight: bold;}</style>
随时随地看视频慕课网APP
相关分类
JavaScript