为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