Переключение CSS файлов через js?

Question

thehighhomie @thehighhomie

Переключение CSS файлов через js?

Как грамотно сделать переключение css файлов без перезагрузки? Например как тут themevip.co слева белый квадратик.

Вопрос задан более трёх лет назад
661 просмотр

Комментировать

Подписаться 2 Оценить Комментировать

Решения вопроса 5

2 комментария

6 комментариев

thehighhomie @thehighhomie Автор вопроса

ну а что если попросили именно так сделать?

Написано более трёх лет назад
thehighhomie @thehighhomie Автор вопроса
можно конечно сделать так:
function CSSLoad(file){ var link = document.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setAttribute("href", file); document.getElementsByTagName("head")[0].appendChild(link) } CSSLoad('/addStyles.css');

но мне кажется это не очень будет с точки зрения производительности, надо их наверное как то подзагрузить сразу?
Написано более трёх лет назад
Евгений Обыкновенный @evgeniy8086

А можно сделать селектор сразу на несколько правил, что не писать каждый раз
body.type1 div.class1 {}
body.type1 div.class2 {}?

Написано более трёх лет назад
SagePtr @SagePtr

Евгений Обыкновенный: если вложить селекторы в какой-нибудь элемент, то лучше воспользоваться препроцессором вроде Less или Sass.

Написано более трёх лет назад
Kovalsky @lazalu68

thehighhomie: Если вам просто надо загружать разные CSS, вы их берете и загружаете. Если хотите их кешировать, то сначала загружаете все нужные CSS в пустой iframe, должно сработать. Если хотите изменять существующие стили, то оперируете со styleSheet. Где-то в тех степях есть возможность поставить флажок типа "не использовать этот styleSheet", если вдруг вы все таки захотите использовать много элементов

Написано более трёх лет назад
Kovalsky @lazalu68

thehighhomie: кстати, на сайте который вы привели в пример, делается именно так, как сказал этот чувак: при нажатии на кнопку цвета с <body> снимаются все классы и добавляется один нужный.

Написано более трёх лет назад

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- 18 часов назад
- 118 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- 23 часа назад
- 47 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 166 просмотров
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- вчера
- 105 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 105 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 103 просмотра
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 708 просмотров
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 77 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 64 просмотра
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Chatgpt Google sheets

25 нояб. 2024, в 15:43

1500 руб./за проект

Написание статей в нужном стиле ( интерьер, дизайн спальни etc )

25 нояб. 2024, в 15:01

1000 руб./за проект

Разработать телеграмм бота для заказа такси!!!

25 нояб. 2024, в 14:54

25000 руб./за проект

Answer 1 · 2016-09-08 17:54:27

Денис Букреев @denisbookreev

На каком основании ты решил, что там аж целые файлы переключаются?
Просто надо немного шире мыслить

Ответ написан более трёх лет назад

2 комментария

Answer 2 · 2016-09-08 18:05:06

SagePtr @SagePtr

Еда - это святое

По-нормальному: элементу body задаётся класс, и на основании класса те или иные правила действуют)

Ответ написан более трёх лет назад

6 комментариев

Answer 3 · 2016-09-08 18:15:37

Может можно js-ом менять значение href в элементе

<link id="mycss" rel="stylesheet" type="text/css" href="styles.css">

Сам не пробовал, это лишь предположение.

Answer 4 · 2016-09-08 18:20:56

Антон @SPAHI4

реактовцы - это не девы, а прокидыватели пропсов

Для webpack есть классный css-loader

Ответ написан более трёх лет назад

Комментировать

Answer 5 · 2016-09-08 19:07:24

Болтовня ничего не стоит. Покажите нам код

var style = document.createElement('link');
style.rel = 'stylesheet';
style.href = 'style.css'
document.body.appendChild(style');

Переключение CSS файлов через js?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт