javascript - 在 JavaScript/jQuery 中更新 CSS

Question

以下代码是侧边栏打开和关闭 Action 的示例，其中应更新一些 CSS 值以正确显示侧边栏。

function openNav() {
    document.getElementById("sidebar").style.width = "250px";
    document.getElementById("mainContent").style.marginLeft = "250px";
    document.getElementById("codePanel").style.marginLeft = "10px";
}

function closeNav() {
    document.getElementById("sidebar").style.width = "0";
    document.getElementById("mainContent").style.marginLeft = "0px";
    document.getElementById("codePanel").style.marginLeft = "40px";
}

现在我问自己，如果我更新更多不同的样式，是否有更好的方法来做到这一点？

因为在这段代码中，我需要添加越来越多看起来非常笨拙的相似代码行。

Answer 1

如果您向所有要更新的元素添加一个初始类

<div id="sidebar" class="update"></div>
<div id="codePanel" class="update"></div>

然后添加一些样式(注意style specificity)

#sidebar.update {
    width : 200px;
}

#sidebar.update.updated  {
    width : 250px;
}

#codePanel.update.updated {
    color : red;
}

您可以轻松地将那个类添加到循环中的多个元素

var elems = document.querySelectorAll('.update');

elems.forEach(function(elem) {
    elem.classList.add('updated');
});