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;">

score 0 · Accepted Answer

如果 modaldiv具有特定id的 s，您可以通过引用它们或它们内部的页脚来使用它，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");

这里还有一个演示了这一点的演示。

希望这可以帮助：）

1 回答 1