首頁猿問如何設置在輸入字段...

如何設置在輸入字段 type=text 中輸入并使用按鈕添加的 (css) 文本的樣式？

JavaScript

桃花長相依 2023-02-17 10:50:00

我對網頁設計和編程很陌生，有一個問題。我正在使用 javascript、html 和 css 開發一個待辦事項列表，我能夠成功地將輸入字段連接到“添加”按鈕并擁有它，以便在單擊按鈕時鍵入的內容顯示在列表中?，F在我想使用 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;}

反對回復 2023-02-17

炎炎設計

TA貢獻1808條經驗獲得超4個贊

關于您的問題：我想使用 css 設置文本樣式。如何設置輸入字段中文本的樣式？

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

你可以像這樣的風格。

反對回復 2023-02-17

MM們

TA貢獻1886條經驗獲得超2個贊

解決方案：

要對輸入中的內容進行樣式設置，您必須使用像這樣的顏色屬性：

input { /*Selects input*/

color: green /*Changes the color to green*/

}

反對回復 2023-02-17

HUH函數

TA貢獻1836條經驗獲得超4個贊

在元素上設置樣式span。

例如，您可以通過這種方式將其設為粗體： span.style.fontWeight = 'bold';

或者在close你正在使用的類上設置 CSS，方法是將如下內容放入<head>：

<style>

span.close {

font-weight: bold;

}

</style>

反對回復 2023-02-17

4 回答
0 關注
146 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何設置在輸入字段 type=text 中輸入并使用按鈕添加的 (css) 文本的樣式？

如何設置在輸入字段 type=text 中輸入并使用按鈕添加的 (css) 文本的樣式？

4 回答

添加回答

如何設置在輸入字段 type=text 中輸入并使用按鈕添加的 (css) 文本的樣式？