如何动态更改map上所有Leaflet弹窗的背景颜色？

Question

我的默认 Leaflet 弹出窗口的背景颜色为白色。 当用户打开黑暗模式时，我希望他们都变成黑色。

我正在遍历所有弹出窗口，但由于某种原因它们没有改变颜色。 我尝试将自定义 class 添加到弹出窗口，但这也不起作用。

我缺少什么来动态更改所有弹出包装的颜色？

.leaflet-popup-content-wrapper {
    background: white;
}

var wrapper = document.getElementsByClassName('leaflet-popup-content-wrapper');

for (var i = 0; i < wrapper.length; i++) {
    wrapper[i].style.backgroundColor = 'black';
}

编辑

通过 XaC 下面的回答，我意识到我需要更改所有未打开的弹出窗口。 我怎么会go这个呢？

更新代码

这是我正在使用的代码。 如果我只使用L.popup() ，切换类是有效的，因为弹出窗口在 map 上打开。但是，当使用marker.bindPopup()时，它会失败并且类不会切换。

遍历任何一个时，控制台都不会打印任何内容。 基本上，在单击标记之前，弹出窗口似乎根本不存在。

CSS

.light .leaflet-popup-content-wrapper {
    background: black;
}

.dark .leaflet-popup-content-wrapper {
    background: white;
}

放置标记

marker.bindPopup(popupContents(item), {
    closeButton: false,
    className: 'light'
}).addTo(layer);

切换类

document.addEventListener('dark-mode-updated', event => {
    if (event.detail.text === 1) {
        var popups = document.getElementsByClassName('light');
        while (popups.length > 0) {
            
        // nothing prints here when using bindPopup() UNLESS a popup is open
        console.log(popups);
            
        popups[0].classList.replace('light','dark');
        }
    }
}

Answer 1

你的代码对我有用：

我放了 3 个弹出窗口，其中一个链接到一个标记，当我通过按钮调用 function 时，它们会改变颜色：

function changecolour(){
            var wrapper = document.getElementsByClassName('leaflet-popup-content-wrapper');
        
            while( wrapper.length; i++) {
                wrapper[i].style.backgroundColor = colourList[colourIndex];
                colourIndex=(colourIndex+1)%colourList.length
            }
        }

然而，当创建一个新的弹出窗口时，它开始时没有背景颜色（ wrapper[i].style.backgroundColor = <empty string> ），但是如果您将更改颜色 function 应用到它，它将采用一个值。

要更改三角形提示，您可以执行相同的操作：

var tip = document.getElementsByClassName('leaflet-popup-tip');

将颜色设置为'black'也有效，所以我不确定为什么你的小便不会改变颜色。

在打开之前更改弹出窗口：

您可以在 css 中创建自定义 class：

 .black-popup .leaflet-popup-content-wrapper {
    background: black;
    }   

并在打开弹出窗口时使用它：

L.popup({className: 'black-popup'})

要动态更改它，您可以创建另一个具有不同颜色的弹出窗口 class，并更改 class：

var blackpopuplist = document.getElementsByClassName('black-popup');
        
while(blackpopuplist.length>0) {
        blackpopuplist[0].classList.switch('black-popup','red-popup');

（由于 JS 是动态的， blackpopuplist.length将随着类的删除而减少到 0 --- 请参阅此问题How to change class for all elements retrieved by document.getElementsByClassName ）