html - 如何将类属性添加到 discourse-modal div

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这说明了这一点。

希望这有帮助:)