為CSS樣式分配JavaScript數組元素類或ID

Question

我正在嘗試將類和id分配給我在js中創建並輸入到html中的數組中的項目。 我這樣做是為了可以在樣式表中設置樣式。 每個項目的樣式都不相同。

我是一個初學者，因此嘗試將其保持在代碼中，我可以理解並使其盡可能整潔，即，不要將每個項目都作為html中的元素。

這部分工作正常：

var pool =['A','B','3','J','R','1','Q','F','5','T','0','K','N','C','R','U']
var letters = pool.join('');
document.getElementById('key').innerHTML = letters; 

這部分不是很多：

var char1 = letters[1];
char1.classList.add('hoverRed');

還有一個類似的問題在這里是沒有工作對我來說，它只是表明[object][object][object]當我跑了。

Answer 1

您的代碼嘗試將樣式應用於數組元素，但是CSS僅應用於HTML。 如果希望為字符串中的一個字符設置樣式，則必須將該字符包裝在HTML元素中（ <span>是包裝內聯值的最佳選擇）。

此代碼顯示了如何完成此操作：

 var pool =['A','B','3','J','R','1','Q','F','5','T','0','K','N','C','R','U'] var letters = pool.join(''); // Replace a specific character with the same character, but wrapped in a <span> // so it can be styled letters = letters.replace(letters[1], "<span>" + letters[1] + "</span>"); // Insert the letters string into the div var theDiv = document.getElementById('key'); // Inject the string into the div theDiv.innerHTML = letters; // Get a reference to the span: var theSpan = theDiv.querySelector("span"); // Add the style to the <span> that wraps the character, not the character itself theSpan.classList.add('hoverRed'); 

 .hoverRed { color:red; } 

 <div id="key"></div> 

而且，此代碼段顯示了如何將CSS應用於任何字母：

 var pool =['A','B','3','J','R','1','Q','F','5','T','0','K','N','C','R','U']; // Leave the original array alone so that it can be manipulated any way needed // in the future, but create a new array that wraps each array element within // a <span>. This can be accomplished in several ways, but the map() array method // is the most straight-forward. var charSpanArray = pool.map(function(char){ return "<span>" + char + "</span>"; }); // Decide which character(s) need CSS applied to them. This data can come from anywhere // Here, we'll just say that the 2nd and 5th ones should. // Loop through the new array and on the 2nd and 5th elements, apply the CSS class charSpanArray.forEach(function(element, index, array){ // Check for the particular array elements in question if(index === 1 || index === 4){ // Update those strings to include the CSS array[index] = element.replace("<span>","<span class='hoverRed'>"); } }); // Now, turn the new array into a string var letters = charSpanArray.join(''); // For diagnostics, print the string to the console just to see what we've got console.log(letters); // Get a reference to the div container var theDiv = document.getElementById('key'); // Inject the string into the div theDiv.innerHTML = letters; 

 .hoverRed { color:red; } 

 <div id="key"></div> 

Answer 2

您走的路正確，但是錯過了一件關鍵的事情。

在您的示例中，池包含字符。 當使用join組合它們時，將得到一個字符串。 將該字符串設置為元素的innerHTML並不能賦予字符串超能力，它仍然只是一個字符串。

為了獲得classList，您需要將字母更改為元素並使用它們。

我在下面提供了一個es6示例（以及一個正在工作的插件），介紹了如何獲取所需的功能。

let pool = ['A','B','3','J','R','1','Q','F','5','T','0','K','N','C','R','U']

const letterToElement = function(char) {
  //Create the element
  let e = document.createElement("SPAN");

  //Create the text node
  let t = document.createTextNode(char);

  //Put the text node on the element
  e.appendChild(t);

  //Add the class name you want
  e.className += "hoverRed";
  return e;
};

//create your elements from your pool and append them to the "key" element
window.onload = function() {
  let container = document.getElementById("key");
  pool.map(l => letterToElement(l))
      .forEach(e => container.appendChild(e));  
}

https://plnkr.co/edit/mBhA60aUCEGSs0t0MDGu