0

I have a javascript application where for some obscure reasons I need to:

  • Inject styles into my html head
  • Remove these styles from my html head at a later stage

My simplified setup I have right now is something like this...

Injecting the <style ...> tag:

const css = `
  * {
    outline: 2px dashed lime;  
  }
`;

const styleEl = document.createElement('style');

styleEl.id = 'myid';

document.head.appendChild(styleEl);

styleEl.appendChild(document.createTextNode(css));

And at another time I want to remove those styles again, using the id I assigned to identify the <style ...> tag, because a lot of other style nodes are in the head:

const styleElement = document.getElementById('myid');

if (styleElement && styleElement.parentNode) styleElement.parentNode.removeChild(styleElement);

I think the id on the <style ...> tag is not valid HTML. But can also not think of another elegant way of solving this. I cannot use inline styles in this case, because the styles should apply the whole document (actually targeting an injected iframe).

Thoughts and help is much appreciated!

Rogier
  • 142
  • 11
  • 1
    I'm curious as to what those obscure reasons may be. However, this answer may help - https://stackoverflow.com/a/524798/13168911 – Andrew Corrigan Feb 10 '22 at 16:44
  • 1
    You can keep the reference (the JS variable) to the created element and use that to delete it later. But what makes you think it's invalid HTML to add an id to a style tag? – Noam Feb 10 '22 at 16:48
  • Thanks @Noam! You are right, that is the way I will set it up. And you are also right about the id; the element includes global attributes, which `id` is one off too. I just did not see any of those attributes on style tags before, so made a wrong assumption! – Rogier Feb 10 '22 at 20:35
  • Thanks also Andrew. Short version is that I have an external iframe that adds another element to the end of the body, which I cannot give a class, or inline styling. So I want to apply certain styling to iframes, but wan't to get rid of that styling when navigating away from that part of the application. – Rogier Feb 10 '22 at 20:37
  • If that's the case, I don't think it will work. Stylesheets of the parent frame do not affect elements in an iframe, and you cannot manipulate the DOM of an iframe unless it's from the same origin as your page. You can apply styles like `width` and `background` to the iframe element itself, but this can be done with inline styles as well. – Noam Feb 11 '22 at 06:22
  • It actually works. This whole thing is about a make shift dark mode which inverts the color of the website, but the iframe should be excluded from that inversion. I cannot apply the styles inline because the iframe is injected by this third party captcha I am using... With the tips I got here I am able to navigate through the minefield safely. – Rogier Feb 11 '22 at 08:56

1 Answers1

1

You don't have to get it by id again. You have it in styleEl variable, so just remove it from a DOM like this:

styleEl.remove(); // remove it from the DOM

You can do this repeatedly. Append and remove.

justMatys
  • 112
  • 3