title: how to add dynamically css to head after click on a href link
body: <p>Is it possible to import css stylesheets to <code>test.php</code> head after redirect page to test.php after click on a href link from <code>index</code> page using Javascript? If so, how can it be done? </p>
  
  <p>problem is that <code>styles.css</code> not working or display in <code>test.php</code> page?</p>
  
  <p>i have code like this:</p>
  
  <p><strong>Index Page</strong></p>
  
  <pre><code>&lt;a id="some_id" class="optional_has_click"&gt;Click Me&lt;/a&gt;
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  
  $("#some_id").click(function(){
  
   // add dynamically css file from external link and display to head
   window.location.href = 'test.php'; 
  
  var cssId = 'styles'; 
  var head  = document.getElementsByTagName('head')[0];
  var link  = document.createElement('link');
  link.id   = cssId;
  link.rel  = 'stylesheet';
  link.type = 'text/css';
  link.href = 'http://example.com/styles.css';
  link.media = 'all';
  head.appendChild(link);
  
  document.write("&lt;style&gt;#jstree-marker-line, 
  #preloader{ background:none !important}&lt;/style&gt;");
  
  });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>test page</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
  
  &lt;p&gt;test&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>