代码之家 › 专栏 › 技术社区 › arman

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

leaflet

0

arman · 技术社区 · 7 年前

我有两个css类“mapzoom-in”和“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和add my class放大控件

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

工作,但他们隐藏

1 回复 | 直到 7 年前

1

IvanSanchez 7 年前

这是一个 XY problem . 你只想得到 HTMLElement 为每个按钮添加一个CSS类作为解决方案;然后你要问的是在实现你尝试的解决方案时遇到的问题,而不是你想要实现什么。

你可以得到每个 HTMLElement公司 通过配对传单的缩放按钮 getContainer() L.Control.Zoom 一起 the querySelector() method of any 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类。