Adding/Removing Properties from CSS Classes with JavaScript [duplicate]

Question

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.

Why not simply toggle a class on a parent element (like the <body>) that has CSS rules to change the behavior of elements throughout the page? — Jon Uleis
– Jon Uleis, Commented Jul 21, 2021 at 17:37
Does these answer your question? changing CSS class definition or How to change/remove CSS classes definitions at runtime — showdev
– showdev, Commented Jul 21, 2021 at 17:41
Thank you Jon Uleis and showdev - those suggestions look quite promising. — Bibliophael
– Bibliophael, Commented Jul 21, 2021 at 17:47

Kelvin Schoofs · Accepted Answer · 2021-07-21 17:35:25Z

-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');

answered Jul 21, 2021 at 17:35

Kelvin Schoofs

8,7462 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bibliophael Over a year ago

What I want to do here is not add a class to an element, but to add or remove properties to/from a class.

Kelvin Schoofs Over a year ago

Hmm I see, I did indeed focus on DOM elements.

Collectives™ on Stack Overflow

Adding/Removing Properties from CSS Classes with JavaScript [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related