Question

是否可以动态更改加载的CSS文件的位置？例如：

        <?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>

这样的东西？我有一些CSS文件（模板），我想有一个选项更改主题而不刷新（更改CSS文件源而不刷新页面）。

结果应该是

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

现在它返回空白变量“type”和“theme”，它们可能无法从编辑器类的函数中获取数据（它在PHP中工作但是刷新）。问题是我试图用JS删除最后链接的CSS文件并链接新的（但不同，用户想要的那个，没有刷新页面）
感谢您的任何提示/建议！

Answer 1

答案很简单，你创建了一个带有值的函数和按钮（比如这个按钮会打开CSS文件1，这个CSS文件2等）：

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

这就是魔术：

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" />'); 
});

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

1 个答案: