当 javascript 中的 element.classList.add() 方法添加新的 class 时，无法使用 DOM 操作设置元素样式

Question

I am trying to style a table like this

  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td >Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td >Jackson</td>
    <td>94</td>
  </tr>
</table> 

which has a Javascript code that would create classes shown below

td.classList.add("col");

However I don't understand why styling using that class won't work with the below code

const tabl= document.getElementsByClassName("col");

    for (var i = 0; i < tabl.length; i++) {
      tabl[i].style.backgroundColor="red";
    } 

Answer 1

Why use class name? Please try this. Hope it can help

 var elements = document.getElementsByTagName('td') var tds = Array.from(elements) tds.map(element => { element.setAttribute('class', 'classname') }) // check console.log('finded tds: ' + document.getElementsByClassName('classname').length)

 <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td >Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td >Jackson</td> <td>94</td> </tr> </table>

Answer 2

So, I can't see where you're going wrong from the little code you presented. I filled in the gaps as best I could to get this working, and it adds the red color for me.

//Get NodeList of all tds
let tds = document.querySelectorAll('td');

//Convert NodeList to Array
tds = Array.from(tds);

//Add class 'col' to each td
tds.map((td) => td.classList.add('col'));

//Get all '.col' elements
const tabl= document.getElementsByClassName("col");

//Programmatically set style attribute on each .col
for (var i = 0; i < tabl.length; i++) {
  tabl[i].style.backgroundColor="red";
} 

It's generally considered bad practice to directly, programmatically set the style of an element in this way; it's better to add a class and handle style via the CSS file. Since you're already adding a class, why not just set that class to set background-color: red in the CSS file anyway?

Anyway, you can check a StackBlitz here to see it up and running: https://stackblitz.com/edit/js-2zm68n