如何使用JavaScript为同时含row和docutils类的div添加自定义CSS类

问题原因 #

你的代码存在两个核心错误导致不生效：

• document.getElementsByClassName() 仅支持传入单个类名，你传入空格分隔的row docutils双类名，无法匹配到对应元素
• 直接拼接className时没有加前置空格，就算匹配到元素，最终类名会拼接为row docutilsmy-class，无法得到独立的my-class类

解决方案 #

方案1：jQuery实现（你已经引入jQuery，代码最简）

你已经用了jQuery的$(document).ready，直接用jQuery的选择器和类操作方法即可：

$(document).ready(function () {
  $('div.row.docutils').addClass('my-class');
});

jQuery的多类选择器可以直接匹配同时带row和docutils的元素，addClass方法会自动处理空格、类重复问题，无需额外处理。

方案2：原生JS实现（无需依赖jQuery）

document.addEventListener('DOMContentLoaded', function() {
  // querySelectorAll支持多类选择器匹配
  const targetEls = document.querySelectorAll('div.row.docutils');
  // classList.add是原生标准类操作API，自动处理格式问题
  targetEls.forEach(el => el.classList.add('my-class'));
});

额外注意 #

如果你的div.row.docutils是页面加载完成后通过异步请求、动态渲染生成的，需要将上述加类逻辑放到动态渲染完成的回调函数中执行，否则DOM还未生成时执行选择逻辑会匹配不到元素。

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