|
1 - 15 16 - 25
След.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
 |
Динамическое управление стилями CSS |
|
Послано: 16-07-2015 09:06 |
|
|
Для получения информации о подключенных таблицах стилей можно использовать следующие инструменты:
// первая таблица стилей
document.styleSheets[0]
//возвращает URI файла таблицы стилей для внешних таблиц и null для внутренних таблиц документа
document.styleSheets[0].href;
//отключение 1-го элемента (соответственно false = включение).
document.styleSheets[0].disabled=true;
//количество таблиц стилей
document.styleSheets.length;
====================================
IE не реализует правила в соответствии со стандартами.
Вместо атрибута cssRules он использует rules.
IE использует также removeRule вместо deleteRule и addRule(selector, rule, index) вместо insertRule.
--------------------------------------------------------------------------------
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
 |
Динамическое управление стилями CSS |
|
Послано: 16-07-2015 09:26 |
|
|
Свойство cssText может использоваться как для создания правил, так и для получения текста существующего оператора.
var my_css=document.styleSheets[0].cssRules[0].cssText;
var my_css=document.styleSheets[0].cssRules[0].style.cssText; // для IE
document.styleSheets[0].cssRules[0].cssText="BODY { color: red }";
document.styleSheets[0].rules[0].style.cssText="BODY { color: red }";// для IE
document.styleSheets[0].deleteRule(0);//удаляет правило с номером 0
document.styleSheets[0].removeRule(0); // для IE
document.styleSheets[0].cssRules.length //возвращает количество операторов в данном списке
document.styleSheets[0].rules.length; // для IE
document.styleSheets[0].insertRule("BODY { color: red }", 0); //вставляет новое правило перед правилом с номером 0
document.styleSheets[0].addRule("BODY", "color: red", 0);// для IE
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Динамическое управление стилями |
|
Послано: 16-07-2015 09:39 |
|
|
Отделить IE от правильных браузеров.
if (typeof documentStyleSheet.cssRules !== "undefined")
numbCssRules=documentStyleSheet.cssRules.length
else
numbCssRules=documentStyleSheet.rules.length;
Или в более короткой но менее наглядной форме
numbCssRules=(typeof documentStyleSheet.cssRules !== "undefined")? documentStyleSheet.cssRules.length: documentStyleSheet.rules.length;
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Динамическое управление стилями |
|
Послано: 16-07-2015 09:58 |
|
|
Способы доступа к стилям именованных элементов.
var myIdStyle=document.getElementById("my_id").style;
myIdStyle.setProperty("background-color", "red", ""); // установить свойство
myIdStyle.getPropertyValue("background-color"); //чтение свойств
Или так
document.getElementById("my_id").style.backgroundColor = "red";//запись свойств
document.getElementById("my_id").style.backgroundColor; //чтение этих свойств.
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Динамическое управление стилями |
|
Послано: 16-07-2015 10:05 |
|
|
Вставить / удалить атрибуты
var myIdStyle = document.getElementById("my_id").style;
myIdStyle.setAttribute("borderBottomWidth", 5, false); //вставили
myIdStyle.removeAttribute("borderTopWidth", false); //удалили
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Динамическое управление стилями |
|
Послано: 16-07-2015 10:26 |
|
|
Вставить новую таблицу стилей из файла
function setCSS(css){
var head = document.getElementsByTagName("head")[0];
var style = document.createElement("link");
style.setAttribute("rel","stylesheet");
//style.setAttribute("media","all");
style.setAttribute("href",css);
style.setAttribute("type","text/css");
head.insertBefore(style,head.firstChild);
}
setCSS("template/style.css");
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Динамическое управление стилями |
|
Послано: 16-07-2015 10:36 |
|
|
var ct = document.getElementById('scroll'),
/* далее - строка "в стиле" css */
styles = 'width:200px;height:50px;background-color:#e4e8eA;';
if (ct.getAttribute('style'))
ct.style.cssText = styles;
else
ct.setAttribute('style', styles);
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Динамическое управление стилями |
|
Послано: 16-07-2015 13:48 |
|
|
Если тэг style имеет атрибут title, то при переборе таблиц стилей его можно идентифицировать.
<style type="text/css" title="first1">
....
</style>
<style type="text/css" title="werty">
....
</style>
....
<sсript type="text/Javasсript">
var numbStyleSheet=document.styleSheets.length;
for (var i=0; i < numbStyleSheet; i++ )
{
documentStyleSheet=document.styleSheets[i];
document.writeln("i="+i+" title="+documentStyleSheet.title+"<br />");
}
</sсript>
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Динамическое управление стилями |
|
Послано: 17-07-2015 10:15 |
|
|
<html>
<head>
<title>Динамическая смена CSS-файлов со стилями</title>
<link id="CSSsource" href="light.css" rel="stylesheet" />
</head>
<body>
...
<input
type="button"
value="изменить стиль на тёмный"
onclick="document.getElementById('CSSsource').href='dark.css'"
/>
...
</body>
</html>
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Динамическое управление стилями |
|
Послано: 17-07-2015 11:29 |
|
|
Групповые изменения стилей
var dommtb=document.getElementById("mtb");
var list = dommtb.getElementsByTagName('A');
for (var i = 0; i < list.length; i++)
{
list[i].className="linkbold";
list[i].target='_blank';
}
var listr = dommtb.getElementsByTagName('TR');
for (var i = 0; i < listr.length; i++)
{
obnode=listr[i];
obnode.firstChild.className="dat";
obnode.lastChild.className="pad";
}
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Динамическое управление стилями |
|
Послано: 17-07-2015 11:34 |
|
|
Еще участок кода, который используется на этом сайте
wer=document.getElementById(nofid);
wer.setAttribute("onmouseover", "ov(this,0)");
wer.setAttribute("onmouseout", "ov(this,1)");
wer.className="zz";
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Динамическое управление стилями |
|
Послано: 17-07-2015 11:36 |
|
|
Удалить элемент стиля
function clearCSSRules(sheet){
if (sheet.cssRules)
i = sheet.cssRules.length - 1
else if (sheet.rules)
i = sheet.rules.length - 1 ;
else return;
// Remove all the rules from the end inwards.
while(i >= 0){
if("deleteRule" in sheet) { sheet.deleteRule(i); }
else if("removeRule" in sheet) { sheet.removeRule(i); }
i--;
}
}
clearCSSRules(document.styleSheets[0]);
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Динамическое управление стилями |
|
Послано: 17-07-2015 11:39 |
|
|
Изменить элемент стиля
function changeIt() {
if (!document.styleSheets) return;
var theRules = new Array();
if (document.styleSheets[1].cssRules)
theRules = document.styleSheets[1].cssRules
else if (document.styleSheets[1].rules)
theRules = document.styleSheets[1].rules
else return;
theRules[theRules.length-1].style.backgroundColor = '#EEF0F5';
}
changeIt();
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Динамическое управление стилями |
|
Послано: 17-07-2015 14:48 |
|
|
Следует упомянуть, что во всех свойствах, относящихся к размерам,
значение должно быть строковое с указанием единиц измерения. То есть:
document.getElementById("myel").style.left = 250; // Неправильно: должна быть строка, а это число
document.getElementById("myel").style.left = "250"; // Неправильно: отсутствуют единицы измерения
document.getElementById("myel").style.left = "250px"; // Правильно
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Динамическое управление стилями |
|
Послано: 17-07-2015 15:07 |
|
|
Добавить элемент в таблицу стилей
<div>
Internet Explorer makes <strong>HTML</strong> dynamic.
</div>
<sсript>
var new_rule;
new_rule = document.styleSheets[0].addRule("div strong", "color:blue", 0);
</sсript>
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
|
1 - 15 16 - 25
След.
|
