為什么 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() 方法。 只是一個建議☺