我对网页设计和编程很陌生，有一个问题。我正在使用 javascript、html 和 css 开发一个待办事项列表，我能够成功地将输入字段连接到“添加”按钮并拥有它，以便在单击按钮时键入的内容显示在列表中。现在我想使用 css 设置文本样式。如何设置输入字段中文本的样式？正如我所说，我希望我输入的文本在我按下列表中的按钮后出现。html: [1]: https://i.stack.imgur.com/ZXSAh.pngjavascript: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猫小萌
TA贡献1911条经验 获得超7个赞
最好的方法是设置一个可重用的 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>
炎炎设计
TA贡献1808条经验 获得超4个赞
关于您的问题：我想使用 css 设置文本样式。如何设置输入字段中文本的样式？
<span onclick="myFunction()" class="button" style="color: orange; font-weight: bold;">Add</span>
你可以像这样的风格。
MM们
TA贡献1886条经验 获得超2个赞
解决方案：
要对输入中的内容进行样式设置，您必须使用像这样的颜色属性：
input { /*Selects input*/
color: green /*Changes the color to green*/
}
<input type="text" value="My text"/>
HUH函数
TA贡献1836条经验 获得超4个赞
在元素上设置样式span。
例如，您可以通过这种方式将其设为粗体： span.style.fontWeight = 'bold';
或者在close你正在使用的类上设置 CSS，方法是将如下内容放入<head>：
<style>
span.close {
font-weight: bold;
}
</style>
添加回答
举报
0/150
提交
取消