JavaScript无法为Div添加多类名问题求助（附代码）

场景代码 #

HTML元素

<div 
  id="overlay_block" 
  class="overlay-type overlay" 
  data-text-placement="{{ block.settings.overlay_position }}" 
  data-mobile-text-placement="{{ block.settings.overlay_mobile }}">
</div>

原JavaScript代码

var mq = window.matchMedia("(max-width: 767px)");
var overlayBlock = document.getElementById("overlay_block");
var textPlacement = overlayBlock.getAttribute("data-text-placement");
var mobileTextPlacement = overlayBlock.getAttribute("data-mobile-text-placement");
console.log("textPlacement: ", textPlacement);
console.log("mobileTextPlacement: ", mobileTextPlacement);
if (mq.matches) {
  overlayBlock.classList.add(mobileTextPlacement);
  overlayBlock.classList.remove(textPlacement);
} else {
  overlayBlock.classList.add(textPlacement);
  overlayBlock.classList.remove(mobileTextPlacement);
}
window.addEventListener("resize", function () {
  if (window.innerWidth < 767) {
    overlayBlock.classList.add(mobileTextPlacement);
    overlayBlock.classList.remove(textPlacement);
  } else {
    overlayBlock.classList.add(textPlacement);
    overlayBlock.classList.remove(mobileTextPlacement);
  }
});

问题现象 #

控制台打印显示textPlacement值为position--left position--top，mobileTextPlacement值为position--right position--bottom，但直接调用overlayBlock.classList.add(textPlacement)无法添加类名，传入单个类名字符串则正常生效。

修复方案 #

Element.classList.add()和remove()方法要求传入多个独立的类名字符串参数，而非空格分隔的单个字符串。因此需要将多类名字符串拆分成数组，再通过展开运算符传入方法。

修改后的代码：

var mq = window.matchMedia("(max-width: 767px)");
var overlayBlock = document.getElementById("overlay_block");
// 拆分多类名字符串为数组，过滤空字符串处理首尾空格情况
var textPlacement = overlayBlock.getAttribute("data-text-placement").split(/\s+/).filter(Boolean);
var mobileTextPlacement = overlayBlock.getAttribute("data-mobile-text-placement").split(/\s+/).filter(Boolean);

console.log("textPlacement: ", textPlacement);
console.log("mobileTextPlacement: ", mobileTextPlacement);

// 封装类名更新逻辑，避免重复代码
function updateOverlayClasses() {
  if (mq.matches) {
    overlayBlock.classList.add(...mobileTextPlacement);
    overlayBlock.classList.remove(...textPlacement);
  } else {
    overlayBlock.classList.add(...textPlacement);
    overlayBlock.classList.remove(...mobileTextPlacement);
  }
}

// 页面加载时先执行一次
updateOverlayClasses();

// 监听窗口 resize 事件更新类名
window.addEventListener("resize", updateOverlayClasses);

优化说明 #

• 用split(/\s+/)替代split(' ')，可以匹配任意数量的空白字符（多空格、制表符等），兼容性更强
• filter(Boolean)过滤拆分后可能出现的空字符串，避免无效类名传入
• 将重复的类名更新逻辑封装成函数，减少冗余代码
• 统一使用mq.matches判断设备尺寸，和初始判断逻辑保持一致

内容的提问来源于stack exchange，提问作者datacleaner