根据 GeoJSON 中的值更改 innerHTML 中的文本颜色

Question

当我将鼠标悬停在地图上的不同县上时，div 会更新该县在 2020 年选举中是投票给共和党人还是民主党人（除其他外）。它会在 <h2> 标签中说它投了共和党或民主党的票。

我在 GeoJSON 中有一列根据县的多数投票具有红色或蓝色十六进制代码。如何从 GeoJSON 中的该列中提取值以更改 div?

中显示的文本的颜色

这是 div

的屏幕截图

我想让 <h2> 文本颜色（在这个县的例子中是“民主党”）对应于 elecVaxData_voteColor 值。我该怎么做？

TIA，如果需要更多信息，请告诉我。

这是代码

    var map = L.map("map", {
    center: [40, -101],
    zoom: 5,
  });

  // add basemap
  L.tileLayer.provider("CartoDB.PositronNoLabels").addTo(map);

  // add basemap labels
  map.createPane("baselabels");
  map.getPane("baselabels").style.zIndex = 600;
  L.tileLayer
    .provider("CartoDB.PositronOnlyLabels", {
      pane: "baselabels",
      interactive: false,
      attribution:
        '| <a href="https://data.cdc.gov/Vaccinations/COVID-19-Vaccinations-in-the-United-States-County/8xkx-amqh/data">County data</a> | <a href="https://data.cdc.gov/Vaccinations/COVID-19-Vaccinations-in-the-United-States-Jurisdi/unsk-b7fc/data">State data</a> | Map: <a href="https://weircf.wixsite.com/e-portfolio">Chip Weir</a>',
    })
    .addTo(map);

  var infoCounties = L.control();
  infoCounties.onAdd = function (map) {
    this._div = L.DomUtil.create("div", "info"); // create a div with a class "info"
    this.update();
    return this._div;
  };

  // method that we will use to update the control based on feature properties passed
  infoCounties.update = function (props) {
    this._div.innerHTML = props
      ? "<b>" +
        props.elecVaxData_county +
        ", " +
        props.elecVaxData_Recip_State +
        " (" +
        props.elecVaxData_PopClass +
        ")" +
        "</b><br /><b>" +
        props.elecVaxData_Series_Complete_Pop_Pct +
        "</b>" +
        " of the population is fully vaccinated " +
        "</b><br /><br />" +
        "This county voted majority " +
        "<h2 style = 'color: props.elecVaxData_voteColor;'>" +
        props.elecVaxData_full +
        "</h2>" +
        " in the 2020 Presidential election"
      : "Hover over a county";
  };
  infoCounties.addTo(map);

Answer 1

你走对了。您需要在 css 样式中添加颜色。你已经这样做了但是转义了错误的字符串，这个：

"<h2 style = 'color: props.elecVaxData_voteColor;'>" +

应该是：

"<h2 style = 'color: "+props.elecVaxData_voteColor+";'>" +

根据 GeoJSON 中的值更改 innerHTML 中的文本颜色

Make text color in innerHTML change depending on value in GeoJSON

html

javascript

innerhtml

leaflet