SO39063513

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style1.css">
    <link rel="stylesheet" href="style2.css">
 </head>

  <body>
    <h1>Demo</h1>
    <h2>Directions</h2>
    <ol>
    <li>If the text is cyan, then init() has successfully detected style2.css and did not inject style3.css.</li>
    <li>Next, comment out line 6.</li>
    <li>Reload demo and if the text is yellow, then init() is fully functional.</li>
    </ol>
    <h3>Expected Text</h3>
    <ol>
      <li>style 2: Text: Cyan</li>
      <li>style 3: Text: Yellow</li>
      </ol>
      <p>Use devtools and find the &lt;head&gt;. You should see the following*:</p>
      <pre><code>
  &lt;head&gt;
    &lt;link rel="stylesheet" href="style1.css"&gt;
    &lt;!--link rel="stylesheet" href="style2.css"--&gt;
    &lt;link rel="stylesheet" href="style3.css"&gt;
  &lt;/head&gt;
       </code></pre>
       *The code displayed above is always green.
      <script src="init.js"></script>
    <script>
      init();
    </script>
  </body>

</html>

function init() {
  var head = document.getElementsByTagName('head')[0];
  var style2 = document.querySelector('link[href$="style2.css"]');
  var link = document.createElement('link');
  link.href = 'style3.css';
  link.setAttribute('rel', 'stylesheet');
  var inject = (style2) ? false : head.appendChild(link);
  return inject;
}

/* style2.css */
body {
  color: cyan;
  background: black;
}

/* style1.css */
body {
  font: 400 16px/1.5 Verdana;
}
pre {
  border: 3px inset grey;
}
code {
  font: 1.1rem/2 Consolas;
  color: lime;
}

/* style3.css */
body {
  color: yellow;
  background: black;
}