CSSスタイルのためのjavascript配列要素のクラスまたはIDの割り当て

Question

jsで作成した配列の項目にクラスとIDを割り当てようとしています。私はこれをやっているので、私は自分のスタイルシートでそれらをスタイルすることができます。それぞれのアイテムは同じようにスタイルされません。

私は初心者ですので、コードを理解してできるだけきれいにしてください。つまり、これらのアイテムをそれぞれ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にのみ適用されます。文字列内の1文字のスタイルを設定するには、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