How to override DOM changes?

Question

I am working on a demo in which the client has a modal box which display is set to none. When I click on the CTA button fadein and fadeout classes are applied, and display:none changes to display:block for 3-4 sec and then display:block is turned back into display:none I want to remove toggle display:none to display:block and remove the fadein and fadeout classes.

Is there a way I can use the console to remove the display toggle as well as removed classes using javascript

Edit: I have uploaded the DOM changes which I want to remove.

Answer 1

Developer Tools mastery is a vital part of my front-end toolkit. Even when you have the source code, there’s nothing better for learning how something works and debugging than being able to change things in real-time without reloading a page. Learn to love this stuff and it will love you back.

Modern browsers have Developer Tools. Safari may need toggling on and off.

Safari instructions for Developer Tools

Firefox, Chrome and Edge, I typically just right click on an element.

The 4-second limit seems long enough that I might just race against the clock, but if that doesn’t appeal to you, try event listener breakpoints which should work in Chrome and Edge, or Event Breakpoints in Firefox.

Once you see your modal pop up, you can right click on it and inspect that element in Developer Tools. It should then be trivial to find the element’s style and edit it to remove those values you don’t want.

You can then save the output style you’ve changed directly, removing the need for source code entirely. Chrome/Edge has a tool, while Firefox users tend to just copy/paste.

Extra Thoughts on Frameworks and Event Manipulation

It sounds like you may be inspecting a website with a framework as fadeIn/fadeOut classes only do things if they’re told to.

If that’s the case, you have lots of options. If you only care about the modals being visible then simply removing display: none; from fadeOut should work fine. Otherwise, you may want to step into the Developer Console and remove the event with JavaScript. I’d probably pair that with directly editing the modal to make it always display, or add a new event listener that adds display: block; or fadeIn without the corresponding timeOut call to fadeOut.

If you don’t care about breaking the overall functionality of fadeOut, removing the display attribute should work fine though.

Answer 2

try this. add !important to that class using addClass function of javascript. I think it will work well for you.

Answer 3

Hacking DOM events with console? Hang in there man! 😄

Jokes aside if you really don't see other way out of this and for some reason console is the only option to remove the behavior that changes the classes on your element you could simply replace the node of that element with exact copy. By doing this you would automatically drop all event listeners that were attached to it. Here's a snippet you can paste into your console:

const oldElement = $0;
const newElement = oldElement.cloneNode(true);
oldElement.parentNode.replaceChild(newElement, oldElement);

Since we're in the developer tools you can use $0 reference to select the element you need in the elements tab. Just be sure to select it manually yourself.

Answer 4

Option 1 - Is the one mentioned by @Mersan Canonigo (!important rule should work just fine - you can use this to overwrite whatever css you want to overwrite).

Applying !important to the property value of any selector makes it the value that will be applied to the element. This happens regardless of the rank of the selector on the Specificity hierarchy. So basically even if you specify it to a type or pseudo-element it would still overwrite the inline styling.

However I recommend you to use this with extreme caution since when overused it might also cause big styling problems. This should be used as a last resort, and while in your case the use of !important rule is justified, you should make sure you create a special class for this and use it only for this purpose (so you don't get unexpected behavior from it).

Here is a nice article about css specificity that covers !important rule as well.

Observation: This approach depends a lot on fadein and fadeout classes (it might be pretty complicated if those are hard to re-write and if there are to many props is probably not worth it).

---

Option 2 - by getting a reference of the element you can remove a class using classList and edit the style (display: none) using HTMLElement.style .

You can get the element with Document.getElementsByClassName(). If that is too generic (and you have more more elements with same class) you can use this question to guide you to make it more specific.

However if this classes are added from js (onclick) you need to prevent that from your js. So basically get a reference from that element and overwrite the onclick method yourself.

Answer 5

Well, as some fellows already questioned is why you don't have the code of your customer. Id suggest to ask your customer to get source code to make helping you much easier and of course, helping your customer.

But, assuming that they apply their classes through JavaScript, you can use JavaScript keywords like .add, .remove or .toggle on your target

Answer 6

I suggest you try !important rule in css