How do you add a class to a Leaflet marker?

Question

I'm using custom divIcons for my Leaflet markers. I want to add a border to whatever marker I click on, with some simple CSS:

.selectedMarker {
border: 10px solid gold;
}

However, the following with jQuery doesn't work:

$(marker).addClass('selectedMarker');

Then I tried to use Leaflet's own addClass() method. I tried to call use it in the following ways:

marker.addClass('selectedMarker');
L.addClass(marker, 'selectedMarker');
addClass(marker, 'selectedMarker');
DomUtil.addClass(marker, 'selectedMarker');

None of these work. How do I add the selectedMarker class to my marker?

Answer 1

In 1.0 and 0.7 you can use L.DomUtil to add remove classes from a DOM element:

L.DomUtil.addClass(marker._icon, 'className');
L.DomUtil.removeClass(marker._icon, 'className');

Answer 2

I have done it by adding a class to the marker with

var marker = L.marker(loc);
marker.on('click', function() {
    $(marker._icon).addClass('selectedMarker');
}

and then use the css

.leaflet-marker-icon.selectedMarker{
  //your css
}

Answer 3

without using jQuery,

marker._icon.classList.add("className");

Answer 4

I am using the marker = new Marker() syntax, and then marker._icon doesn't work. What solved this for me was to just set a new icon initialized with another class, like so

const originalIcon = new Icon({
    iconUrl: iconImg,
    iconSize: [50, 50],
});
const iconWithNewClass = new Icon({
    iconUrl: iconImg,
    iconSize: [50, 50],
    className: 'new-class',
});

...

marker.setIcon(iconWithNewClass);