首页 / Leaflet / API 文档

DomUtil

先看结论

Leaflet 内部的 DOM 工具集：建元素、改类名、调透明度、写位移，全部是无框架的原生封装。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-29 · 引用本文

L.DomUtil.get(id) → HTMLElement

命名空间没有构造函数，直接以静态方法调用。多数方法封装的是 classList、style 与 transform 的兼容写法。

方法与属性

成员	返回	说明
`get(idOrElement)`	HTMLElement \| null	按 id 取元素，传入元素时原样返回
`getStyle(el, style)`	string	读取计算样式的指定属性
`create(tagName, className?, container?)`	HTMLElement	建元素，可同时设类名并挂到容器
`remove(el)`	—	从父节点移除
`empty(el)`	—	清空所有子节点
`toFront(el)` / `toBack(el)`	—	调整同级元素的前后顺序
`hasClass(el, name)`	boolean	是否含有某个类名
`addClass(el, name)`	—	添加类名
`removeClass(el, name)`	—	移除类名
`setClass(el, name)`	—	覆盖为单个类名
`getClass(el)`	string	读取整个 `className`
`setOpacity(el, value)`	—	设置透明度，值域 0–1
`testProp(props)`	string \| false	返回第一个被浏览器支持的属性名，全不支持时为 `false`
`getPosition(el)`	Point	读取 Leaflet 记录的位移
`setPosition(el, point)`	—	写入位移并记到元素上，供后续动画复用
`getTranslate(el, axis?)`	Point \| number	从计算样式里解析 translate；`axis` 传 `'x'` 或 `'y'` 时只返回对应数值
`setTransform(el, offset, scale?)`	—	直接写 `translate3d`，可叠加缩放
`TRANSFORM`	string	当前浏览器支持的 transform 属性名

在 pane 里放一个角标

pane 本身是绝对定位的容器，往里加元素后只要给出位移就能跟随地图平移。 setPosition 会把坐标记在元素的 _leaflet_pos 上，后续地图拖动的整体位移会基于这个值累加。

var pane = map.getPane('overlayPane');

var badge = L.DomUtil.create('div', 'count-badge', pane);
badge.textContent = '12 个要素';

L.DomUtil.setPosition(badge, L.point(12, 12));
L.DomUtil.setOpacity(badge, 0.85);

对应的样式至少要给出绝对定位与背景，否则元素会挤在 pane 的文档流里：

.count-badge {
  position: absolute;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(18, 24, 38, 0.82);
  color: #fff;
  font-size: 12px;
}

类名操作用的时机

Leaflet 的图层、控件在增删时都会切换类名，CSS 过渡挂在类名上比直接写 style 更稳。需要临时高亮一个元素时，addClass 加 removeClass 就够；需要整体替换时用 setClass，但它会丢掉元素上原有的其它类名。

位移为什么不用 left / top

拖动地图时 Leaflet 只改容器的 transform，所有子元素跟着一起动，避免逐个重排。自己写 left / top 的元素会脱离这套机制，在缩放动画里出现抖动。自定义覆盖物统一走 setPosition / setTransform。

getTranslate 读的是计算样式，可能带矩阵形式。 元素被 CSS 动画或第三方库改过 transform 后，解析结果不一定等于写入值。需要可靠坐标时读 getPosition(el)，它取的是 Leaflet 自己记录的值。

引用本文

经纬志（2026）。《DomUtil》。https://www.jingweizhi.com/leaflet/api/dom-util.html（访问日期 2026-11-03）。