如果我們單擊該字段，則使用 javascript 更改背景顏色

Question

如果我們在我的頁面 index.html 中有：

 <span class="token-label" style="max-width: 1072px;">Hello world</span>
 <span class="token-label" style="max-width: 1072px;">Bye world</span>

在頁面中，我們有一個包含字段的表單：

Hello world    Bye world

我想：當我點擊這兩個字段中的一個時，我會在下面得到一個小列表：點亮 3 colors 我選擇一種顏色來用這種顏色為這個字段的背景着色，請在 javascript

我是 javascript 的初學者，我不知道我們該怎么做，請幫忙，我只是想像這樣獲得“Hello world”的值：

document.getElementsByClassName('token-label')[0].textContent 

我在互聯網上搜索，我發現：帶有顏色的容器切換標簽......但我不明白。

Answer 1

我可以提供一個腳本，它對我有用，所以它應該可以工作。

#token-label {
  background-color: ; /* Set your background color */
}  

javascript：

 var colors = ["#"]; // Set the background color you want to change
var colorIndex = 0;
function changeColor() {
    var col = document.getElementById("token-label");          
    if( colorIndex >= colors.length ) {
        colorIndex = 0;
    }
    if (colors[colorIndex] == col.getAttribute("currentColor")){
        col.style.backgroundColor = null;
        col.setAttribute("currentColor",col.style.backgroundColor);
      }
        else {
        col.style.backgroundColor = colors[colorIndex];
        col.setAttribute("currentColor",colors[colorIndex]);
      }
    
    colorIndex++;   
} 

並將class="token-label"更改為id="token-label"讓我知道它是否有效，如果不是，也許我有什么問題，所以我可以改變它。

Answer 2

vanilla javascript 中最簡單的解決方案應該看起來像下面的代碼片段

我理解你的問題了嗎？

 // obtain elements const htmlCollection = document.getElementsByClassName("token-label"); const array = [...htmlCollection]; // add listener to show the palette array.forEach(span => span.addEventListener("click", modifyColor, false)); function modifyColor(mouseEvent) { const target = mouseEvent.currentTarget; const x = mouseEvent.clientX; const y = mouseEvent.clientY; function colorChosen(color) { target.style.backgroundColor = color; } showPalette({ x, y }, colorChosen); } function createDiv(style) { const div = document.createElement("div"); Object.entries(style).forEach(([property, value]) => div.style[property] = value); return div; } function showPalette({ x, y }, callback) { // palette itself const paletteElement = createDiv({ position: "absolute", left: `${x}px`, top: `${y}px` }); document.body.append(paletteElement); // here you can redefine html colors const colors = ["LightSalmon", "LightGreen", "LightBlue"]; // each color creation and adding click listeners colors.forEach(colorValue => { const colorElement = createDiv({ width: "40px", height: "20px", backgroundColor: colorValue }); colorElement.addEventListener("click", () => { cleanup(); callback(colorValue); }, false); paletteElement.append(colorElement); }); // don't forget to remove palette from document function cleanup() { document.body.removeChild(paletteElement); } }

 <span class="token-label" style="max-width: 1072px;">Hello world</span> <span class="token-label" style="max-width: 1072px;">Bye world</span>