我默认的传单弹出窗口的背景色是白色。当用户打开黑暗模式时，我希望它们都变成黑色。
我在所有的弹出窗口上循环，但是由于某种原因，它们没有改变颜色。我试着在弹出窗口中添加一个自定义类，但是也不起作用。
动态更改所有弹出窗口 Package 器的颜色时，我遗漏了什么？
.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的回答，我意识到我需要修改所有未打开的弹出窗口。我该怎么做呢？
更新代码
下面是我使用的代码。如果我只使用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');
}
}
}
1条答案
按热度按时间pcww981p1#
您的代码对我有效：
我放了3个弹出窗口和一个链接到标记，当我通过按钮调用函数时，它们会改变颜色：
但是，当创建一个新的弹出窗口时，它开始时没有背景颜色（
wrapper[i].style.backgroundColor=<empty string>），但是如果您对它应用更改颜色函数，它将取值。要更改三角形刀尖，可以使用以下命令执行相同操作：
var tip = document.getElementsByClassName('leaflet-popup-tip');把颜色设置为
'black'也可以，所以我不知道为什么你的poups不改变颜色。要在弹出窗口打开前对其进行更改：
你可以在css中创建一个自定义类：
并在打开弹出窗口时使用：
要动态更改它，您可以创建另一个具有不同颜色的弹出窗口类，然后更改该类：
(as JS是动态的，
blackpopuplist.length会随着类的删除而减为0---参见此问题How to change class for all elements retrieved by document.getElementsByClassName）弹出框与标记结合
要将类分配给链接到标记的弹出窗口：
在创建标记时定义类：
或者先创建弹出窗口，然后将其绑定到标记：
如上所述，如果你设置了类，并且在它们显示之前改变了颜色，它们将首先以第一种颜色显示。2你可以在每次弹出窗口打开时运行类切换功能，以确保它们都有正确的颜色。