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

Question

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

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

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

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

对于这些单元格，我添加了这样的类名：

my_cell.classList.add("left");

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

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

我尝试改变我的定义：

.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() 方法。 只是一个建议☺