为什么 ClassList.Add() 没有应用样式？

Question

我正在使用 JavaScript 创建一个表格，默认情况下，表格中的所有单元格都右对齐：

.my-table td { text-align: right; }

但是，在某些情况下，我希望单元格左对齐。

.my-table td.left { text-align: left !important; }

对于这些单元格，我添加了类名，如下所示：

my_cell.classList.add("left");

在查看 DOM 树时，我可以看到该名称已成功应用于单元格。 但是，没有应用样式，当我在开发人员工具中查看元素的样式时，它甚至没有出现。 通常，如果样式被覆盖，我会看到类名出现在样式下，并且样式中会有一行被覆盖。 然而，“左”类的名字没有出现在所有可能应用的样式，即使它是在元素的类名列表<td class="left">当我看着DOM树。

为什么/如何将类名应用于元素，但绝对没有与之关联的样式？

我试过排列我的定义：

.my-table td.left { text-align: left !important; }

.my-table td .left { text-align: left !important; }

等等，但没有任何效果。

这是我当前的脚本：

<script type="text/javascript">
    jQuery(document).ready(function() {

        jQuery("#reference").load(URL);

        let table_div = document.createElement("table");
        table_div.classList.add("my-table");

        let tbody = table_div.appendChild(document.createElement("tbody"));
      
        let rows = document.getElementById("reference").getElementsByTagName("tr");
      
        for (let i = 0; i < rows.length; i++) {
          
            let table_row = tbody.appendChild(document.createElement("tr"));
          
            if (i === 0) { // leave header row alone
                 table_row.innerHTML = rows[i].innerHTML;
                 continue;
            }
            
            let cells = rows[i].getElementsByTagName("td")
        
            for (let j=0; j < cells.length; j++) {
                                    
                let td = table_row.appendChild(document.createElement("td"));
                let val = cells[j].innerHTML;
                td.innerHTML = val;
              
                if (val.includes("%"))
                    continue;
              
                td.classList.add("left");
            }
        }
            
        document.getElementById("my_table").appendChild(table_div);
    });

</script>

Answer 1

我不知道为什么会发生这种情况，但您可以尝试创建两个具有相同属性（对齐除外）的类名，然后在需要时切换（意思是删除或插入）。

您可以尝试内置的 .toggle() 方法。 只是一个建议☺