使用leaflet并排插件动态设置div

Question

我想通过side-by-side plug in中滑块的位置来设置div的左边距。看起来可以将dividermove事件内置到插件中，但是我还没有想出一种方法来将它提供给我的div的CSS。

在下面的jsfiddle中，我基本上想使用dividermove动态设置左边距#year05和#year15。我尝试将#year05类设置为从leaflet-sbs-divider继承left，但无法使其工作，我想这不是正确的方法。

https://jsfiddle.net/x8r0pvg1/45/

Answer 1

如果我理解正确的话，您只是想定位一些跟随Leaflet Side-by-Side插件滑块的文本。

在这种情况下，不是尝试在"dividermove"事件上重新定位文本/ div，一个非常简单的解决方案是将div附加到滑块/分隔条本身，这样当插件调整后者的位置时，div会自动跟随：

var yearsEl = document.getElementById('years'); // your div
document.querySelector('.leaflet-sbs-divider').appendChild(yearsEl);

然后，您可以使用您选择的方法将div放在分隔符的中心位置，例如使用CSS：

#years {
  width: 200px;
  transform: translateX(-50%);
  text-align: center;
}

更新的JSFiddle：https://jsfiddle.net/x8r0pvg1/47/