javascript - Bootstrap 4 Popover CSS 不动态变化

Question

我有一个深色主题，可以改变整个页面的背景颜色。但是，这不会改变我拥有的弹出窗口的背景颜色。

我想知道是否有人有任何想法？我遇到的问题是我更改了弹出窗口的 CSS，但每当我打开弹出窗口时它都不会更新。

我试过将 css 本身更改为 tomato 并且它确实正确初始化，所以我知道可以更改弹出窗口。

这是 darktheme 和 popover 的 css:

.dark-theme {
            color: #e1e1e1;
            background-color: #333333;
            transition: all 0.25s ease-out;
        }
.popover {
            background-color: tomato;
        }

这是darktheme运行的脚本

function IsDarkTheme()
{
       darkThemeEnabled = document.body.classList.toggle('dark-theme');
       localStorage.setItem('darkThemeEnabled', darkThemeEnabled);
       $("popover").css({"background-color": "#333333"});
}

这是创建弹出窗口的 jquery

$('#RESET').ready(function () {
    $('[data-toggle="popover"]').popover({
        placement: 'top',
        html: true,
        title: 'Are you sure? <a href="#" class="close" data-dismiss="alert">&times;</a>',
        content: '<button id="RESETCON" onclick="RESET()" type="button" class="btn btn-danger w-100">Yes, I want to reset everything!</button>'
    });
    $(document).on("click", ".popover .close", function () {
        $(this).parents(".popover").popover('hide');
    });
});

编辑:Here is it currently live .

编辑 2:我发现当我单击以更改为深色主题时，弹出窗口确实会改变颜色，前提是且仅当它已经打开时。我不知道如何更改所有弹出框的颜色，即使它们尚未显示、创建或任何其他内容。

Answer 1

此行不正确:

$("popover").css({"background-color": "#333333"});

您正在选择 <popover>元素，这些元素可能不存在于您的文档中。试试类选择器:

$(".popover").css({"background-color": "#333333"});