這是一個幫助大型專案的簡單示例 -
期望的結果：當您在表單框中鍵入名稱時，會出現一個包含該名稱的句子。但是，只有名稱應該是紅色，并且只在結果中（當它出現在表單框中時不應該是紅色）。
在此代碼中包含“nameHere.style.color”時出現錯誤：
JS：
function getResponse(){
var nameHere = document.getElementById("name").value;
nameHere.style.color = "red";
var resultValue = "Hello my name is " nameHere ", nice to meet you.";
document.getElementById("result").innerHTML = resultValue;
}
HTML：
<div class="formclass">
<label for="name">Input name here</label>
<input id="name" onchange="getResponse()"></input>
</div>
<div id="result"></div>
有什么真正的方法可以在 JavaScript 中做我想做的事情嗎？
編輯：強調一下，我真的很想改變接受元素的變數的顏色。價值——不僅僅是元素。我希望它作為顏色出現在結果中。我找不到任何可以讓我正確執行此操作的內容。
uj5u.com熱心網友回復：
基本上，您將樣式應用于元素，而不是原始文本。在您的代碼中，您試圖設定style一段原始文本的屬性，該文本沒有style屬性，因此會出錯。在這種情況下，您需要添加一個元素來區分您的輸出name。從那里，您可以準備好一個類（我稱之為這個.theName）并將類名應用于元素，或者您可以直接通過腳本設定樣式（就像您嘗試的那樣）。我在這里展示了這兩個例子。第二個使用 a setTimeout- 這只是為了在更改顏色之前允許短暫的延遲 - 僅用于說明目的。
function getResponse(){
let nameHere = document.getElementById("name").value;
let resultValue = `Hello my name is <span class='theName'>${nameHere}</span>, nice to meet you.`;
document.getElementById("result").innerHTML = resultValue;
// or if you want to change the element after it's been written to the page
setTimeout(() => {
document.querySelector('.theName').style.color='blue';
}, 1000);
}
.theName{
color:red;
} <div class="formclass">
<label for="name">Input name here</label>
<input id="name" onchange="getResponse()"></input>
</div>
<div id="result"></div>uj5u.com熱心網友回復：
當然，您只需要使用類似的元素span而不是文字字串。
const input = document.getElementById("name");
const result = document.getElementById("result");
function getResponse() {
const name = input.value;
let nameWrapper = document.createElement('span');
nameWrapper.style.color = 'red';
nameWrapper.innerText = name;
result.innerHTML = '';
result.appendChild(document.createTextNode('Hello my name is '));
result.appendChild(nameWrapper);
result.appendChild(document.createTextNode(', nice to meet you.'));
}<div class="formclass">
<label for="name">Input name here</label>
<input id="name" onchange="getResponse()">
</div>
<div id="result"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/405239.html
標籤：
上一篇：如何實作這種設計顫振