我有一個 div
<div class="display-container"></div>
在這個 div 中，我想使用 JavaScript 事件偵聽器附加一些文本
const calculatorDisplay = document.querySelector(".display-container")
function appendNumber(number) {
calculatorDisplay.append(number)
}
// number event listener
one.addEventListener("click", () => {
calculatorDisplay.append(1)
})
它作業得很好，但這里的問題是顯示容器 div 的背景顏色是黑色，字串的默認顏色是黑色，那么，我如何更改附加字串的顏色？我已經嘗試過使用樣式標簽，但這不起作用，我也嘗試過使用 fontcolor()，但這也不起作用。我注意到附加的字串的 id 為#text，但如果我嘗試，我就無法使用它。
uj5u.com熱心網友回復：
定義css類
<style>
.colored-text {
color: red;
}
</style>
然后使用彩色文本類創建 span 元素并附加它
// number event listener
one.addEventListener("click", () => {
const newSpan = document.createElement('span');
newSpan.classList.add('colored-text');
newSpan.textContent = 1;
calculatorDisplay.append(newSpan);
})
順便提一句。為什么要定義 appendNumber 函式而不使用它？
uj5u.com熱心網友回復：
有幾種方法可以實作這一點。
javascript
const calculatorDisplay = document.querySelector(".display-container")
// changing the color to red
calculatroDisplay.style.color = 'red';
// it accepts also Hex colors
calculatorDisplay.style.color = '#FF5733'
// OR rgb
calculatorDisplay.style.color = 'rgb(255,0,0)
CSS
也可以將類名附加到您的 div 中。像這樣，您可以使代碼可能更具可重用性，并且可以以簡單的方式應用更多樣式而不僅僅是顏色。（有多種方法可以在你的 html 中包含 CSS，google it^^）
// within in the <head> tag in the html add a <style> tag.
<html>
<head>
<style>
.red-color {
color: red
}
</style>
</head>
<body>
<!-- ..... --->
</body>
</html>
在代碼中，您現在可以使用element.classList.add() OR添加類名element.classList.remove()來洗掉類！
function setRedColor(el) {
el.classList.add('red-color')
}
function removeRedColor(el) {
el.classList.remove('red-color')
}
const calculatorDisplay = document.querySelector(".display-container")
setRedColor(calculatorDisplay)
// ...
removeRedColor(calculatorDisplay)
請注意，element.classListAPI 通常不允許在其中包含空格的類名。所以如果你有多個類，你必須一個一個地應用它們，否則你會遇到錯誤。
歡迎發表評論
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/427026.html
標籤：javascript dom
下一篇：值未在瀏覽器中列印