Выгрузить / удалить динамически загружаемые файлы css
После загрузки такого файла css:
const themes = ['dark-theme.css', 'light-theme.css'];
async function loadcss(file) {
return await import(file);
}
loadcss(themes[0]).then(console.info)
Вывод на консоль - это для меня пустой объект, а новый анонимный тег <style> находится в <head> моего index.html. Пока все хорошо, но что, если я (в этом примере) хочу изменить тему на light-theme.css. Это объединит обе темы, поскольку dark-theme.css уже загружен.
Есть ли способ Удалить тега <style> из DOM?
Чтобы уточнить мой вопрос, приведенный пример демонстрирует абстрактное поведение, и меня интересует только удаление динамически загружаемого CSS из DOM.
Ответы 2
Я не знаю vue.js, но вот простой пример в React, надеюсь, что это как-то поможет :) возможно, по крайней мере, некоторые идеи :)
class TodoApp extends React.Component {
static themes = {
dark: 'dark-theme.css',
light: 'light-theme.css',
};
render() {
return ReactDOM.createPortal(
(<link rel = "stylesheet" href = {TodoApp.themes.dark} type = "text/css"></link>),
document.head
);
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
Благодаря OZZIE я подверг сомнению свою методологию и обнаружил, что импорт файлов css, как показывает мой вопрос (через импорт ES6 или require.context (...)), бесполезен, поскольку мы не можем его идентифицировать, мы не получаем доступа к элементу <style>, что не оставляет нам доступа к DOM и возможности манипулировать им.
Вместо этого мы свяжем файлы css вручную в <head>, так как мы знаем их имя и путь.
const themes = ['dark-theme.css', 'light-theme.css'];
const head = document.body.parentElement.firstElementChild;
const link = document.createElement('link');
link.setAttribute('href', process.env.BASE_URL + themes[0]);
link.setAttribute('id', themes[0]); // set id so we can remove it later
head.appendChild(link);
Спасибо, это уже подсказало мне идею. При написании своего вопроса я подумал о подходе на чистом javascript, но использование компонентов и их управления DOM того стоит!