powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Динамическая подгрузка стилей на страницу через Ajax
8 сообщений из 8, страница 1 из 1
Динамическая подгрузка стилей на страницу через Ajax
    #38925119
Фотография Shocker.Pro
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Есть веб-приложение, состоящее из нескольких страничек.
Странички загружаются по GET, дальше их фрагменты обновляются аяксом (SPA-приложение)

Каждый обновляемый фрагмент, передаваемый с сервера) представляет собой JSON (который может содержать в себе как разметку, так и служебные данные, то есть я запросто могу добавить в него как ссылку на стилевой файл, так и непосредственно стили в виде текста). В процессе работы подгружается, уничтожается, заменяется множество таких фрагментов.

Некоторые фрагменты могут иметь специфические стили. При этом каждый фрагмент достаточно самостоятельный, кроме того, заведомо неизвестно, какой фрагмент на какую из страниц будет подгружаться (и в каком количестве). То есть логично, чтобы стили подгружались вместе с загрузкой фрагмента (и при желании выгружались при уничтожении фрагмента, зачем захламлять память).

Загрузкой/выгрузкой фрагментов занимается мой собственный код (используя $.ajax), то есть я могу модифицировать его как вздумается).


Вопрос в том, как лучше всего организовать весь этот процесс?
...
Рейтинг: 0 / 0
Динамическая подгрузка стилей на страницу через Ajax
    #38925401
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
создавать новый тег STYLE, пихать туда строку CSS, после отработки подчищать (удалять этот тег STYLE)
...
Рейтинг: 0 / 0
Динамическая подгрузка стилей на страницу через Ajax
    #38925415
Фотография Shocker.Pro
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
создавать динамически с помощью $('...') и цеплять append-ом к head, так?

это будет адекватно работать в различных браузерах?

как идентифицировать этот тег для последующего удаления? можно ли к нему добавить атрибут id или другие атрибуты? Или хранить jquery-ссылку на него?
...
Рейтинг: 0 / 0
Динамическая подгрузка стилей на страницу через Ajax
    #38925425
Фотография -k2-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Shocker.Pro,

расходы по загрузке одного сжатого и закешированного css файла могут быть намного меньше,
чем постоянная манипуляция кусками, все стремятся в основном слить в один файл
...
Рейтинг: 0 / 0
Динамическая подгрузка стилей на страницу через Ajax
    #38925430
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Shocker.Proсоздавать динамически с помощью $('...') и цеплять append-ом к head, так?

это будет адекватно работать в различных браузерах?да. цепляние НЕ к head не работало бы в сафари, во всем остальном это самый кошерный способ.

Shocker.Proкак идентифицировать этот тег для последующего удаления? можно ли к нему добавить атрибут id или другие атрибуты? Или хранить jquery-ссылку на него?как угодно, на что хватит фантазии. у любого тега может быть любой атрибут.
...
Рейтинг: 0 / 0
Динамическая подгрузка стилей на страницу через Ajax
    #38925434
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Shocker.Pro,

это очень просто просто и без jQuery делается.
Будет работать во всех браузерах мгновенно, то-есть после добавления или удаления стилей тут-же будет меняться внешний вид.

Иногда нужно всего-то пару стилей подправить или показать/скрыть несколько колонок,
вот для этого и требуются такие действия как Вам надо,

эх, приведу так и быть изменённыей немного код из своих наработок (код подправлен и не проверен, но должен работать)

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
// Динамическое добавление CSS-стилей и тега style без внешнего файла CSS.
// В строке s - аналог содержимого CSS-файла, id - идентификатор существующего тега для его перезаписи (будет удалён старый и создан новый). id может иметь тип number или string
// Пример вызова: my_addStyle('.my_link:hover { color:#dddddd; text-decoration:none; }'[, id]);
// Возвращает ID (тип number или тот, что передавался) нового тега style для возможной передачи в функцию my_removeStyle(id).
// Возвращает false если s не строка или пустая строка, никаких действий при этом не поисходит.
function my_addStyle(s, id) {
var p, i;
if (s&&typeof s=='string'&&s.length>0) {
	if (id) my_removeStyle(id);
	p=document.createElement('style');
	p.setAttribute("type","text/css");
	if (!id) { id = Math.round(Math.random()*9000000); }
	p.id = 'my_style_tag_'+id;
	if (p.styleSheet) {
		p.styleSheet.cssText=s;
	} else {
		s=document.createTextNode(s); p.appendChild(s);
	}
	document.getElementsByTagName("head")[0].appendChild(p);
	return id;
} return false;
}

// Удаление CSS-стилей по ID (удаление тега style) и возврат true или false в случае, если тег не найден
// Если параметр id отсутствует, то удаляются все теги style, установленные ранее через функцию my_addStyle(s[,id]) и возврат true.
// id может иметь тип number или string
function my_removeStyle(id) {
var p, a, i;
if (id) {
	p = document.getElementById('my_style_tag_'+id);
	if (p) { p.parentNode.removeChild(p); return true; }
} else {
	a = document.getElementsByTagName('style') || 0;
	if (a) {
		for (i=a.length-1; a>=0; a-=1) {
			if (a[i].id.substr(0,13)=='my_style_tag_') { a[i].parentNode.removeChild(a[i]); }
		}
		return true;
	}
} return false;
}
...
Рейтинг: 0 / 0
Динамическая подгрузка стилей на страницу через Ajax
    #38925451
Фотография Shocker.Pro
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
-k2-расходы по загрузке одного сжатого и закешированного css файла могут быть намного меньше,
чем постоянная манипуляция кусками, все стремятся в основном слить в один файля это осознаю, баланс разумности будет соблюден )
...
Рейтинг: 0 / 0
Динамическая подгрузка стилей на страницу через Ajax
    #38925460
Фотография Shocker.Pro
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
бухалтер фантоцциэто очень просто просто и без jQuery делаетсяспасибо за пример, ну так или иначе jQuery подключен
бухалтер фантоцципоказать/скрыть несколько колонок,да, кстати, иногда стиль с динамическими параметрами был бы очень уместен
...
Рейтинг: 0 / 0
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Динамическая подгрузка стилей на страницу через Ajax
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]