Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Через javascript добавить в глобальный CSS / 12 сообщений из 12, страница 1 из 1
11.06.2016, 15:04
    #39254655
вопрос от новичка
вопрос от новичка
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Через javascript добавить в глобальный CSS
Находил cssText и аналогичные статьи.
А можно ли в Javascript создать глобальную CSS строку для всего сайта? Типа такого
Код: javascript
1.
appendNewCssLine ('div {background:#eea;}  .someClass {color:#555; padding:4px;}')


Здесь у всех div поменяется фон. Также появится новый класс someClass, который можно присвоить в будущем созданным элементам.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.06.2016, 15:22
    #39254661
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Через javascript добавить в глобальный CSS
Нет, но можно подгрузить CSS файл, содержащий нужные стили:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
var head = document.getElementsByTagName('head')[0],
    link = document.createElement('link');

link.setAttribute('href', 'mystyles.css');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');

head.appendChild(link);


аналогичный jQuery-код:
Код: javascript
1.
$('head').append('<link href="mystyles.css" rel="stylesheet" type="text/css" />');


А чего Вы хотите добиться?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.06.2016, 15:37
    #39254665
вопрос от новичка
вопрос от новичка
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Через javascript добавить в глобальный CSS
skyANA,

за вариант спасибо, не знал.
А конкретной цели нет, так, в учебных целях... А вдруг есть такое удобство?
У javascript вполне обоснованные ограничения, например, нельзя копировать в буфер обмена, менять файлы на диске и т.д.
Ещё раз спасибо!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.06.2016, 00:24
    #39254863
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Через javascript добавить в глобальный CSS
вопрос от новичкаНаходил cssText и аналогичные статьи.
А можно ли в Javascript создать глобальную CSS строку для всего сайта? Типа такого
Код: javascript
1.
appendNewCssLine ('div {background:#eea;}  .someClass {color:#555; padding:4px;}')


Здесь у всех div поменяется фон. Также появится новый класс someClass, который можно присвоить в будущем созданным элементам.
Можно.

Практически мгновенно, по сравнению с подгрузкой внешнего файла.
Для этого нужно работать с тегами style , создавая и удаляя их, и задавая содержимое.

Было уже здесь ранее 17465937

Нет разницы, как задавать срдержимое для новых тегов style :
- можно задавать URL-адрес для подгрузки из внешнего файла
- можно загонять туда динамично фрмируемую CSS-строку (то же самое, что и содержимое CSS-файла)

Каждый вновь создаваемый стилевой тег накладывает новые классы и стили поверх существующих.
После удаления тега, происходит мгновенный откат на предыдущее состояние.

Таким образом можно организовать работу с темами , менять темы, добавлять темы, отменять темы.
быстро менять оформление или точечно уточнять стили, не используя внешние CSS-файлы или стили конкретных объектов.

Код: html
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.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
<!DOCTYPE HTML>
<html>
<head>
	<title>Работа с темами</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
// Динамическое добавление 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;
}
</script>

</head>
<body>
	<p class="class1">slkvhasklvhlkashvlkashklvhasdkl</p>
	<input type="button" value="add theme" onclick="my_addStyle('.class1 { color:#000080;font-size:30px;text-decoration:underline;}',1)">
	<input type="button" value="remove theme" onclick="my_removeStyle(1)">
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.06.2016, 00:34
    #39254865
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Через javascript добавить в глобальный CSS
P.S.
Таким способом удобно добавлять различные псевдоклассы, CSS-анимацию, правила keyframes и т.д.
Ограничений нет никаких, это абсолютно то-же самое, что и внешний CSS-файл.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.06.2016, 00:36
    #39254866
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Через javascript добавить в глобальный CSS
бухалтер фантоцциP.S.
Таким способом удобно добавлять различные псевдоклассы, CSS-анимацию, правила keyframes и т.д.
Ограничений нет никаких, это абсолютно то-же самое, что и внешний CSS-файл.
+1
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.06.2016, 00:48
    #39254869
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Через javascript добавить в глобальный CSS
skyANA,

Как с Вами лучше связаться?
Разговор есть ))
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.06.2016, 00:54
    #39254871
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Через javascript добавить в глобальный CSS
бухалтер фантоцциskyANA,

Как с Вами лучше связаться?
Разговор есть ))
Открыл email в профиле. Пишите.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.06.2016, 01:01
    #39254874
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Через javascript добавить в глобальный CSS
skyANA,

Спасибо. Записал.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.06.2016, 09:19
    #39254888
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Через javascript добавить в глобальный CSS
бухалтер фантоцци,

отлично! Класс!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.06.2016, 17:36
    #39256540
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Через javascript добавить в глобальный CSS
skyANA,

Моё письмо приходило?
Отправлял 13 июня в 21:44
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.06.2016, 19:40
    #39256626
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Через javascript добавить в глобальный CSS
бухалтер фантоцциskyANA,

Моё письмо приходило?
Отправлял 13 июня в 21:44
Да, только сейчас открыл. За городом был.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Через javascript добавить в глобальный CSS / 12 сообщений из 12, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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