如何将 css 类添加到放大和缩小按钮?传单地图

Question

>我有两个css类"mapzoom-on"和"mapzoom-out"用于放大和缩小控件 但是我不知道如何在按钮中添加类 有人有想法吗？

我想通过以下代码获取元素： https://leafletjs.com/reference-1.3.4.html#domutil

get(<String|HTMLElement> id)    

但例如，这是放大按钮 html 内容。但是该按钮没有特定的ID

<a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+<div></div></a>

，然后使用 addClass 并添加我的类以放大控件

我尝试

var zoomInBtn = document.getElementsByClassName("leaflet-control-zoom-in")[0].className="mapzoom-in";
var zoomOutBtn =document.getElementsByClassName("leaflet-control-zoom-out")[0].className="mapzoom-out";

工作，但他们隐藏了

Answer 1

这是一个XY问题。您只想获取对每个按钮的HTMLElement的引用，并且您考虑为每个按钮添加一个 CSS 类作为解决方案;然后，您询问的是实现尝试的解决方案的问题，而不是询问您想要实现的目标。

通过将 Leaflet 的getContainer()L.Control.Zoom方法与任何HTMLElement的querySelector()方法配对，您可以获得对缩放按钮的每个HTMLElement的引用，例如：

var leafletMap = L.map('map-container');
var control = leafletMap.zoomControl;
var controlElement = control.getContainer();
var zoomInElement = controlElement.querySelector('.leaflet-control-zoom-in');
var zoomOutElement = controlElement.querySelector('.leaflet-control-zoom-out');

此外，如果每个地图只有一个缩放控件，则可以使用 CSS 选择器通过querySelector获取适当的HTMLElement，例如：

var zoomInElement = document.querySelector('#map-container .leaflet-control-zoom-in');

单个按钮不需要 ID 或 CSS 类。