0
60
ViewsHow to override DOM changes?
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.
3 answers
Answer question0
I suggest you try !important rule in css
0
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.
0
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