如何将CSS添加到Leaflet按钮？

Question

我正在尝试更改leaflet中缩放按钮的CSS，但我无法为这些按钮添加类或ID或任何内容。我该如何访问它们？

有什么想法吗？

谢谢！

以下是我声明地图的代码：

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoicHcxN2wwMDgiLCJhIjoiY2pua2c2OWxuMGVkOTNxbWh5MWNqajEwdyJ9.X_SuGwNGs12TwCsrsUvBxw'
}).addTo(map);

这里我包括了缩放：

L.control.zoom({
    position: 'topright',
}).addTo(map);

当页面加载时，我看到它变成了一个带有一些leaflet类的按钮，但是我该如何对它们进行自定义修改呢？

- felixo

---

你想要改变什么？你可以访问CSS选择器。 - kboul

我想改变按钮的大小并为它们添加一些颜色。这正是我试图弄清楚的，如何访问CSS选择器，甚至添加自己的CSS选择器？谢谢！ - felixo

嗨@kontenurban。如果它曾经帮助过你，请也将这个答案标记为已接受：）。非常感谢。 - kboul

Answer 1

我想还有其他方法，但是要更改缩放按钮的样式，您可以按以下方式访问内置的CSS选择器：

.leaflet-touch .leaflet-bar a {
  width: 50px;
  background-color: red;
}

var map = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
  .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
  .openPopup();

#mapid {
  height: 180px;
}

.leaflet-touch .leaflet-bar a {
  width: 50px;
  background-color: red;
}

body {
  margin: 0px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

<div id="mapid"></div>

或者使用js：

document.getElementsByClassName("leaflet-control-zoom-out")[0].style.setProperty('width', '50px');

document.getElementsByClassName("leaflet-control-zoom-out")[0].style.setProperty('background-color', 'red');

- kboul