I am currently managing a sample website with multiple linked style sheets at . One of these style sheet links needs to be toggled on and off, hence it includes a unique id:
<link id="sketch" rel="stylesheet" type="text/css" href="styles/sketch.css">
I have implemented some JavaScript within the header element to disable and enable this specific style sheet. A simplified version of the script is as follows:
var ss = document.querySelector('link#sketch');
var header = document.querySelector('header');
header.onclick = event => { ss.disabled = !ss.disabled; } ;
The script is functioning adequately. However, upon inspecting the style sheets using Firefox's developer tools, I noticed that the sketch.css style sheet is repeatedly added to the list each time the disabled property is set to false.
Does this indicate a flaw in the process? How can I prevent this issue from occurring?
Edit
This behavior is observed on both my Mac with several addons and on my Windows system, even when all addons are disabled.