|
|
|
 |
 |
Исходник |
 |
|
 |
 |
|
Автор:
|
|
|
Название:
|
Динамічна зміна CSS класу визначеного в CSS файлі або в тілі HTML документа |
|
Дата:
|
04 October 2005 |
|
Описание: |
Цей приклад демонструє динамічну зміну визначення CSS стилю за допомогою JavaScrіpt. Мало хто навіть здогадується про таку можливість. Дуже сумно, але вона цілком відсутня в такому оглядачі, як Opera. |
| |
Разместить ссылку на этот исходник в форуме вы можете вставив в текст сообщения
следующую строку:
[CODEPOST ID=166]Динамічна зміна CSS класу визначеного в CSS файлі або в тілі HTML документа[/CODEPOST] |
| Оценка: |
Проголосовало 21 посетителей, средняя оценка 2.67 |
| Оценить: |
|
1 <html>
2 <head>
3 <title>Приклад</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
5 <style type="text/css">
6 A
7 {
8 color: green;
9 font-size: 12px;
10 }
11 .empty
12 {
13 color: white;
14 }
15 .example
16 {
17 font-family: Tahoma, Verdana, Sans-Serif;
18 font-size: 11px;
19 color: blue;
20 }
21 .last-empty
22 {
23 color: black;
24 }
25 DIV.button
26 {
27 padding-top: 12px;
28 }
29 </style>
30 <script type="text/javascript">
31 <!--
32 var rulesProperty;
33
34 /// Функція, яка змiнюе стиль елементу
35 function changeExampleStyle() {
36 // змінюємо стиль класу "example"
37 var rules = _getRulesBySelectorText(".example");
38
39 if(rules != null) {
40 rules.style.color = 'orange';
41 rules.style.fontWeight = 'bold';
42 rules.style.fontSize = '18px';
43 }
44
45 // I навіть змінимо паддінг у стиля для DІV у якому кнопка,
46 // що б кнопка не "стрибнула" через зміну розміру шрифту
47 rules = _getRulesBySelectorText("DIV.button");
48
49 if(rules != null)
50 rules.style.paddingTop = '3px';
51 }
52
53 // Ця Функція шукає і повертає набір правил стилю по його визначенню
54 function _getRulesBySelectorText(searchSelectorText) {
55 var i, j, length, rules;
56
57 // Перевіряємо, чи обчислювалася вже "хитра" властивість об'єкта StyleSheet
58 if(rulesProperty == null)
59 _calculateRulesProperty();
60
61 for (i = 0; i < document.styleSheets.length; i++) {
62 length = window.eval('document.styleSheets[' + i.toString() + '].' + rulesProperty + '.length');
63
64 for (j = 0; j < length; j++) {
65 rules = window.eval('document.styleSheets[' + i.toString() + '].' + rulesProperty + '[' + j.toString() + ']');
66
67 if(rules.selectorText.toLowerCase() == searchSelectorText.toLowerCase())
68 return rules;
69 }
70 }
71
72 return null;
73 }
74
75 // Функція обчислює яка властивість об'єкта StyleSheet повертає
76 // набір правил у даному оглядаче
77 function _calculateRulesProperty() {
78 if(document.styleSheets[0] != null)
79 if(document.styleSheets[0].rules != null)
80 rulesProperty = 'rules';
81 else
82 rulesProperty = 'cssRules';
83 }
84 //-->
85 </script>
86 </head>
87 <body>
88 <div class="example">Приклад</div>
89 <div class="button"><button type="button" onclick="changeExampleStyle()">Змінити стиль</button></div>
90 </body>
91 </html> |
| Вернуться к списку исходников в категории Общие вопросы программирования на ASP.NET |
|
|
|
 |
 |
 |
|
|