时间戳

首页 > 解决方案 > Bootstrap 4 Popover CSS 不会动态更改

javascript - Bootstrap 4 Popover CSS 不会动态更改

问题描述

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

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

我已经尝试将 CSS 本身更改为番茄，并且它确实正确初始化，所以我知道可以更改弹出框。

这是darktheme和popover的css：

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

这是黑暗主题运行的脚本

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');
    });
});

编辑：这是目前的直播。

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

标签： javascriptjquerycss

解决方案

此行不正确：

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

您正在选择<popover>文档中可能不存在的元素。尝试类选择器：

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

推荐阅读