На главную страницу сайта celitel.info
Вы не вошли в систему! [ ВОЙТИ ] или [ ЗАРЕГИСТРИРОВАТЬСЯ ]
CELITEL » Записки сайтостроителя » Тема: Динамическое управление стилями CSS -- Стр. 1  | Перейти в: 

Послал Сообщение
1 - 15  16 - 25  След.
healer
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями 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
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями 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
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями
Послано: 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
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями
Послано: 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
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями
Послано: 16-07-2015 10:05
            

Вставить / удалить атрибуты

var myIdStyle = document.getElementById("my_id").style;
myIdStyle.setAttribute("borderBottomWidth", 5, false); //вставили
myIdStyle.removeAttribute("borderTopWidth", false); //удалили

~~~~~~~~~~~~

Здоровья Вам. Духовного и физического.


healer
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями
Послано: 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
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями
Послано: 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
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями
Послано: 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
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями
Послано: 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
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями
Послано: 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
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями
Послано: 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
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями
Послано: 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
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями
Послано: 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
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями
Послано: 17-07-2015 14:48
            

Следует упомянуть, что во всех свойствах, относящихся к размерам,
значение должно быть строковое с указанием единиц измерения. То есть:

document.getElementById("myel").style.left = 250; // Неправильно: должна быть строка, а это число
document.getElementById("myel").style.left = "250"; // Неправильно: отсутствуют единицы измерения
document.getElementById("myel").style.left = "250px"; // Правильно

~~~~~~~~~~~~

Здоровья Вам. Духовного и физического.


healer
Администратор

Из: Москва
Сообщения: 24454
 Динамическое управление стилями
Послано: 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  След.

Статистика

Сейчас у нас: и 5 Гостя(ей)
Всего сообщений: 26669
Всего тем: 1151
Поздравляем: TigerHeart !!

Based on:

 

  my counter Valid XHTML 1.0 Strict Valid CSS!