使用 JavaScript 在 CSS 类中添加/删除属性 [重复]

Question

我有一个 JavaScript 应用程序，它在页面上的单独 div 中加载用户可以单击打开的项目列表，作为单个项目的详细概述。一般来说，应该允许用户在这个详细的概述中进行修改并与该项目进行交互。然而，在一个特定的加载状态下，当加载 LIST 而不是 OVERVIEW 时确定，这种修改能力应该被禁用。

我有一个用于生成 div 的 CSS 类来保存概览。我希望在打开任何列表项之前，在页面加载时从该类中添加或删除属性的选项，以便根据加载状态指针事件将启用或禁用用户继续打开的任何项目概述。

类似：

my-css-class.addProperty("pointer-events: none");

这可能吗？可以像这样动态修改 CSS 类吗？对于上下文，我使用的是 TypeScript 和 Less CSS。

Answer 1

您可以轻松地使用 JavaScript 向匹配 CSS 选择器的其他元素添加类：

// Get all elements matching the CSS selector
const elements = document.querySelectorAll('.my-css-class');

// Either add a class to each of them
// (requires you to have the appropriate CSS in a stylesheet)
elements.forEach(elem => elem.classList.add('some-class'));

// Or directly modify the style of the elements
elements.forEach(elem => elem.style['pointer-events'] = 'none');