Динамическое обновление исходного файла CSS с помощью JS и PHP

Question

Динамическое обновление исходного файла CSS с помощью JS и PHP

1

Возможно ли динамическое изменение местоположения загруженного файла 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, но с обновлением). Дело в том, что я пытаюсь удалить последний связанный файл CSS с помощью JS и связать новый (но другой, тот, который нужен пользователю, без обновления страницы)
Благодарим вас за советы и предложения!

Jan Kočvara 02 дек. 2017, в 22:41

Источник

0

Вместо <? Php?> Вы должны предоставить <? Php echo [var]?> Или сокращенную запись <? = ..Vars here ..?>
Gerrit Luimstra 02 дек. 2017, в 21:32
0

Вы не отражаете переменные между тегами, поэтому PHP не отображает их.
Gerrit Luimstra 02 дек. 2017, в 21:32
0

Ах да, спасибо!
Jan Kočvara 02 дек. 2017, в 21:40
0

Есть идеи как удалить ссылку? Как вы знаете, теперь я загружаю новый CSS-файл, но все равно мне нужно удалить тот, который я загружал или использовал раньше ...
Jan Kočvara 02 дек. 2017, в 21:43
0

Вот как добавить таблицу стилей с помощью JavaScript, а также как отключить <link> (удаление не удалит стили из CSSOM, если вы не отключите их). Хотя этот вопрос не является точной копией, ваш вопрос уже был дан на этом сайте, и минимальные усилия по поиску дадут вам ответ.
Andrei Gheorghiu 02 дек. 2017, в 22:12
1

Возможно дублирование удаления или замены таблицы стилей (<link>) на JavaScript / jQuery
Andrei Gheorghiu 02 дек. 2017, в 22:12

Показать ещё 4 комментария

Теги:

javascript

css

1 ответ

Ещё вопросы

Вместо <? Php?> Вы должны предоставить <? Php echo [var]?> Или сокращенную запись <? = ..Vars here ..?>
Вы не отражаете переменные между тегами, поэтому PHP не отображает их.
Есть идеи как удалить ссылку? Как вы знаете, теперь я загружаю новый CSS-файл, но все равно мне нужно удалить тот, который я загружал или использовал раньше ...
Вот как добавить таблицу стилей с помощью JavaScript, а также как отключить <link> (удаление не удалит стили из CSSOM, если вы не отключите их). Хотя этот вопрос не является точной копией, ваш вопрос уже был дан на этом сайте, и минимальные усилия по поиску дадут вам ответ.
Возможно дублирование удаления или замены таблицы стилей (<link>) на JavaScript / jQuery

Jan Kočvara · Answer 1 · 2017-12-02T20-28-00.000Z

Ответ прост, вы создаете функцию и кнопки со значениями (например, эта кнопка откроет файл 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" />'); 
});