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

Question

thehighhomie @thehighhomie

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

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

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

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

Подписаться 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

Простой
Как правильнее организовать код калькулятора?
- 1 подписчик
- 10 часов назад
- 63 просмотра
1

ответ
CSS

Простой
Как сделать такую границу?
- 1 подписчик
- 10 часов назад
- 51 просмотр
0

ответов
JavaScript

+3 ещё

Средний
Как поменять тип проекции карты в Leaflet?
- 3 подписчика
- 15 часов назад
- 408 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 19 часов назад
- 48 просмотров
0

ответов
JavaScript

Простой
Почему не срабатывает prototype reverse на строке?
- 1 подписчик
- вчера
- 52 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- вчера
- 142 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Как сделать ajax фильтрацию по категориям в WP?
- 1 подписчик
- вчера
- 40 просмотров
0

ответов
JavaScript

Средний
Как сделать, чтобы встроенный обработчик события убрал сам себя?
- 3 подписчика
- вчера
- 678 просмотров
3

ответа
CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- вчера
- 103 просмотра
2

ответа
JavaScript

Простой
Как реализовать карирование так, чтобы оно не было замкнуто на одну переменную?
- 1 подписчик
- вчера
- 85 просмотров
0

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Нужен человек с опытом работы с библиотекой SwiperJS

03 мая 2024, в 03:55

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

Скрипт для оценки ссылки через Virus Total

03 мая 2024, в 02:30

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

Переписать бота тг с питона на Go по ветке из гита

03 мая 2024, в 02:03

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

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?

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

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

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