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');

有一个类似的问题here对我不起作用，它只是在我运行时显示[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示例（和一个工作的plunker），了解如何获得您想要的功能。

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

为css样式指定javascript数组元素类或id

2 个答案: