Javascript 如何应用多款Poppovers背面颜色

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

// 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;
}

---

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

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

CSS

---

这是不够的信息。问题是什么？你想什么时候改变颜色？另外，你应该为背景色使用一个二级类，例如

.popover.blue

，而不是

popovervalue

。问题是我不知道如何用3种不同的背景色显示3种不同的popover你只会对它们应用不同的类？是的，但我不知道如何使用JavaScript抱歉，我是Js和CSS方面的新手，我写的这段代码正在运行，但它显示了具有相同样式的somo popover，我想用不同的样式显示它

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