如何在discourse-modal div中添加一个class属性

Question

我有一种特殊的话语模式，我想要的风格与其他模式略有不同，但我找不到添加特定类的方法，而不将其添加到所有模态中。

这是显示时常用的模态。

<div id="discourse-modal" class="ember-view modal hidden in" style="display: block;">

我希望能够为每个模态添加一个特定的类，所以我可以使用它作为顶级样式使用例如在登录模式中我想要隐藏页脚但是在编辑类别模式中我想要页脚显示。所以，如果我有一个类名，我可以在顶层引用，那么我可以用不同的方式设置它们。

我希望能够添加这样的东西。

<div id="discourse-modal" class="ember-view modal hidden in login-modal" style="display: block;">

Answer 1

如果模态div具有特定的id，您可以通过在css中引用它们或其中的页脚来使用它：

#login-modal .footer {
    display: none; /*you don't show*/
}

#edit-category-modal .footer {
    /*i'll let you be*/
}

但如果他们没有id或者如果不够好，js会成为您的有效解决方案吗？

在这种情况下，您可以使用element.classList.add(）方法。这是一个例子：

var divs = document.getElementsByClassName("modal");
divs[0].classList.add("login-modal");
divs[1].classList.add("edit-category-modal");

这里还有一个DEMO说明了这一点。

希望这会有所帮助：）