0

I have a JavaScript application which loads a list of items which the user may click to open, in a separate div on the page, as a detailed overview of an individual item. Generally speaking, the user should be allowed to make modifications and interact with that item inside this detailed overview. Under one specific load status, however, determined when the LIST is loaded and not the OVERVIEW, this ability to make modifications should be disabled.

I have a CSS class for the div generated to hold the overview. I want the option to add or remove properties from that class on page load, BEFORE any list item is opened, so that depending on the load status pointer events will be enabled or disabled for any item overviews the user goes on to open.

Something like:

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

Is that possible? Can CSS classes be modified on the fly like this? For context, I am using TypeScript and Less CSS.

Bibliophael
  • 177
  • 11
  • Why not simply toggle a class on a parent element (like the ``) that has CSS rules to change the behavior of elements throughout the page? – Jon Uleis Jul 21 '21 at 17:37
  • Does these answer your question? [changing CSS class definition](https://stackoverflow.com/questions/10643495/changing-css-class-definition) or [How to change/remove CSS classes definitions at runtime](https://stackoverflow.com/questions/730048/how-to-change-remove-css-classes-definitions-at-runtime) – showdev Jul 21 '21 at 17:41
  • Thank you Jon Uleis and showdev - those suggestions look quite promising. – Bibliophael Jul 21 '21 at 17:47

1 Answers1

-1

You can easily use JavaScript to add classes to other elements that match a CSS selector:

// 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');
Kelvin Schoofs
  • 8,323
  • 1
  • 12
  • 31