Question

我有两个CSS类“ mapzoom-in”和“ mapzoom-out”，用于放大和缩小控件但是我不知道如何向按钮添加类有人有主意吗？

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

get(<String|HTMLElement> id)

但是例如，这是zoomIn按钮的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 problem。您只想获得每个按钮的HTMLElement的引用，并考虑将CSS类添加到解决方案中。那么您在问的是实施您尝试的解决方案的问题，而不是在问您想要实现什么。

通过将getContainer()的Leaflet的L.Control.Zoom方法与the querySelector() method of any HTMLElement配对使用，可以获得对缩放按钮的每个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 selectors通过HTMLElement获得相应的querySelector，例如：

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

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

如何将CSS类添加到zoomIn和zoomOut按钮？单张地图

1 个答案: