Fusseldieb Fusseldieb - 1 month ago 6
CSS Question

Trigger classList for * in JavaScript

It is possible to trigger the

*
css element by using classList or something similar in JavaScript?

In my CSS I wrote following to disable all CSS animations site-wide:

* {
transition: none !important;
transition-property: none !important;
transform: none !important;
animation: none !important;
}


This works fine, but I want to trigger it by JavaScript, so I can enable or disable the animations.

I've done following:

*.animationsDisabled {
transition: none !important;
transition-property: none !important;
transform: none !important;
animation: none !important;
}


And at the end of my HTML document (inside the
<body>
), I wrote:

<script>
document.body.classList.add('animationsDisabled');
</script>


It seems that when I load the page, Chrome recognizes what I've done, showing it in the CSS of the developer section, but all CSS animations still work.

element

Why won't this work and what can I make that this works?
(Without jQuery, if possible)

Answer

*.animationsDisabled targets any element that has the css class animationsDisabled. Please also note that *.cssClass is functionally identical to .cssClass as a css selector.

What you want instead is

.animationsDisabled * { 
  transition-property: none !important;
  transform: none !important;
  animation: none !important;
}

which targets any element that is a descendant to an element with css class animationsDisabled.

Edit: Please check that any element inside your body has these rules in the inspector:

enter image description here

If these rules are not visible in the inspector, you have not applied the CSS correctly as suggested in this answer (or the answer below).

Comments