вопрос от новичкаНаходил
cssText и аналогичные статьи.
А
можно ли в Javascript создать глобальную CSS строку для всего сайта? Типа такого
1.
appendNewCssLine ('div {background:#eea;} .someClass {color:#555; padding:4px;}')
Здесь у всех div поменяется фон. Также появится новый класс someClass, который можно присвоить в будущем созданным элементам.
Можно.
Практически мгновенно, по сравнению с подгрузкой внешнего файла.
Для этого нужно работать с тегами
style , создавая и удаляя их, и задавая содержимое.
Было уже здесь ранее
17465937
Нет разницы, как задавать срдержимое для новых тегов
style :
- можно задавать URL-адрес для подгрузки из внешнего файла
- можно загонять туда динамично фрмируемую CSS-строку (то же самое, что и содержимое CSS-файла)
Каждый вновь создаваемый стилевой тег накладывает новые классы и стили поверх существующих.
После удаления тега, происходит мгновенный откат на предыдущее состояние.
Таким образом
можно организовать работу с темами , менять темы, добавлять темы, отменять темы.
быстро менять оформление или точечно уточнять стили, не используя внешние CSS-файлы или стили конкретных объектов.
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>
