使用JS和PHP动态更新CSS文件源

Question

Is it possible to dynamicly change location of loaded CSS file? For example:

        <?php 
            require_once "../objects/edit.php";
            $editor = new EDITOR_FACTORY($db);
        ?>
        <script>
            var type = "<?php $editor->call('Type') ?>";
            var theme = "<?php $editor->call('Theme') ?>";
            $('head').append('<link rel="stylesheet" href="../resources/styles/editor_templates/'+type+'_'+theme+'" type="text/css" />');
        </script>

Something like this? I have some CSS file (templates) and I'd like to have an option change the theme without refreshing (change the CSS file source without refreshing page).

The result should be something like

<link rel="stylesheet" type="text/css" href="../resources/styles/editor_templates/sometype_sometheme.css

Right now it's returning blank variables "type" and "theme", they probably can't take data from the function from editor class (it's working in PHP but with refresh). The thing is I am trying to delete last linked CSS file with JS and link the new one (but different, the one that user wanted, without refreshing page)
Thank you for any tips / suggestions!

Answer 1

The Answer is simple, you create a function and buttons with values (like this button will open CSS file 1, this CSS file 2 etc):

<button class="loadCSS" value="1"> CSS file 1 </button>
<button class="loadCSS" value="2"> CSS file 2 </button>

and here is the magic:

var type = "<?php echo $editor->call('Type') ?>";
var theme = "<?php echo $editor->call('Theme') ?>";
$('head').append('<link id="'+ type+theme +'" rel="stylesheet" href="../resources/styles/editor_templates/'+type+'_'+theme+'.css" type="text/css" />');

$(document.body).on('click', '.loadCSS', function (e) {
   e.preventDefault();
   var buttonTheme = jQuery(this).val();
   $('#'+type+theme).remove(); 
   $('#'+type+buttonTheme).remove(); 
   $('head').append('<link id="'+ type+buttonTheme +'" rel="stylesheet" href="../resources/styles/editor_templates/'+type+'_'+buttonTheme+'.css" type="text/css" />'); 
});