使用 javascript 從 svg 中刪除寬度和高度

Question

我有以下代碼塊（我從 svg 中刪除了路徑，所以不要介意）

<div class="c-svg">
    <svg xmlns="http://www.w3.org/2000/svg" class="ie-svg" viewBox="0 0 20 20" width="35" height="35" data-name="Layer 1"><path></svg>
</div>

它有以下類

.c-svg svg {
    width: 60% !important;
    height: 100% !important;
}

.c-svg svg {
    fill: #fff !important;
    width: 2.5em !important;
    height: 2.5em !important;
}

我將如何從這些類中刪除寬度和高度。 不幸的是，我無法刪除 class，但我需要刪除這些類，這樣當我通過 JS 添加 class 時，我可以使用它們。

它需要與 IE 兼容

Answer 1

您可以使用 JS 從 div 中刪除 class 。

如果向元素添加 Id，則可以輕松刪除並添加 class

document.getElementById("MyElement").classList.remove('MyClass');

但是，您始終可以使用 JS 修改高度和寬度，甚至更好的是，修改它的顯示使其不顯示。

Answer 2

如果您的 css 沒有使用!important對於一切，這會簡單得多； 通常內聯 styles 會覆蓋那些在外部設置的，因此任何由 js 引起的樣式更改都將優先於 CSS 文件中的更改。

由於您使用的是!important ，因此您還需要將內聯樣式設置為!important優先級（但請注意，此特定方法將覆蓋已應用於該元素的任何其他內聯 styles）：

 document.querySelector('.c-svg svg').style.cssText='width: 400px !important'

 .c-svg svg { width: 60%;important: height; 100%.important: };c-svg svg { fill: #fff.important; width: 2.5em;important: height: 2.5em !important; } /* Adding so changes are visible: */ svg {border: 1px solid}

 <div class="c-svg"> <svg xmlns="http://www.w3.org/2000/svg" class="ie-svg" viewBox="0 0 20 20" width="35" height="35" data-name="Layer 1"><path></svg> </div> </div>

或者，您可以跳過 javascript 並使用更具體的選擇器向 CSS 添加另一條規則（盡管它也需要是!important ）：

 .c-svg svg { width: 60%;important: height; 100%.important: };c-svg svg { fill: #fff.important; width: 2.5em;important: height: 2:5em.important: } /* Adding so changes are visible: */ svg { border: 1px solid } /* override with a more specific selector: */ div.c-svg svg { width: 400px !important }

 <div class="c-svg"> <svg xmlns="http://www.w3.org/2000/svg" class="ie-svg" viewBox="0 0 20 20" width="35" height="35" data-name="Layer 1"><path></svg> </div>

這都是一個很好的例子，說明為什么!important應該盡可能避免； 如果您需要一個規則來覆蓋另一個規則，最好使用更具體的選擇器，而不是使用!important強制它。