如何应用多个弹出框背景颜色答案

【问题标题】：how to apply mulpiple popovers backgrpund color如何应用多个弹出框背景颜色
【发布时间】：2019-10-16 13:00:18
【问题描述】：

我有一个显示许多功能的工作代码，当我单击每个功能时，它会显示一个弹出框，但我想以不同的背景颜色显示它，例如。显示了三个弹出框，每一个都有不同的背景颜色。

// display popup on click
map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel,
    function(feature) {
      return feature;
    });
  if (feature) {
    var element = document.getElementById(feature.get('name'));
    var popup = new Overlay({
      element: element,
      positioning: 'bottom-center',
      stopEvent: false,
      offset: [0, -15]
    });
    map.addOverlay(popup);

    var coordinates = feature.getGeometry().getCoordinates();
    popup.setPosition(coordinates);
    $(element).popover({
      placement: 'top',
      html: true,
      content: feature.get('name')
    }); 
    $(element).popover('toggle');
    //$(".popover").css("background", "#C71F1F");   
  }
});

它只使用“.popover”，但我想使用 JS 代码使用“.popover1”和“.popover2”。

//CSS
.popover{
   background: #ebd997;
}
.popover1{
   background: #C71F1F;
}
.popover2{
   background: #FFE600;
}

【问题讨论】：

信息不足。问题是什么？你想什么时候改变颜色？此外，您应该使用第二类作为背景颜色，例如 .popover.blue 而不是 popoverblue
问题是我不知道如何用 3 种不同的背景颜色显示 3 个不同的弹出框
你只是对它们应用不同的类？
是的，但我不知道如何使用 javascript
对不起，我是 Js 和 CSS 的新手，我写的这段代码可以运行，但是它显示了相同样式的 somo popover，我想用不同的样式显示它

标签： javascript jquery html css popover

【解决方案1】：

我刚刚解决了，我创建了一个新的和一个新的 CSS 样式，像这样

var iDiv = document.createElement("div");
iDiv.id = "mydiv"+index;
document.getElementsByTagName('body')[0].appendChild(iDiv);

CSS

var css = '#' + iDiv.id + ' + .popover {background:#FFFFFF;}';
var head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');

head.appendChild(style);

style.type = 'text/css';
if (style.styleSheet){
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}

【讨论】：