使用javascript刪除類樣式屬性

Question

在我的項目中，我有card-footer類，我想使用 javascript 刪除他的樣式background-color屬性。 誰能告訴我這個功能有什么問題？

這是我的 html 標簽

 <div class="card-footer">
   <a name="" id="" class="btn btn-light" href="{{ route('posts.index') }}" role="button">Cancel</a>
   <button type="submit" class="btn btn-primary float-right">Create</button>
 </div>

腳本部分

   <script>
       (function removeProp()
        {
            const cardFooter = document.querySelector(".card-footer");
            cardFooter.style.removeProperty('background-color');
        })();
    </script>

我錯過了什么嗎？

Answer 1

style屬性只處理直接應用於元素的規則（例如，使用 style 屬性）。

它不涉及級聯中其他任何地方的規則。

如果要修改它們，則需要使用CSS 對象模型來訪問包含它們的規則集。

或者，如果您想修改特定元素的值，您可以使用style屬性設置一個新值。

Answer 2

如果您不想使用該類並希望使用新的類規則更新元素，則可以使用以下代碼。 或者您可以簡單地刪除頁腳類。

 (function removeProp() { const cardFooter = document.querySelector(".card-footer"); cardFooter.classList.remove('card-footer'); // you may add another class to change style and define you custom css class rules which you want to apply to cardFooter. cardFooter.classList.add('custom-card-footer'); })();

 .card-footer{ background-color: yellow; } .custom-card-footer{ background-color: grey; }

 <div class="card-footer"> <a name="" id="" class="btn btn-light" href="{{ route('posts.index') }}" role="button">Cancel</a> <button type="submit" class="btn btn-primary float-right">Create</button> </div>

Answer 3

您可以將樣式分配給類或元素。

如果你有 css

.card-footer {
   background-color: ...
}

那么你需要通過以下方式刪除類：

document.querySelector(".card-footer").classList.remove('card-footer')

您還可以通過以下style在 HTML 中查找style元素：

document.querySelector("style").textContent = ... <-- new css without  `background-color` of your `card-footer` class

簡單的可能解決方案是提供兩個具有分離職責的類

例如：

.card-footer { all styles out of bg color } 
.card-bg { backgroud-color: ... }

然后通過classList接口刪除類。