Изменить css с помощью jquery

 
0
 
JavaScript
Kommentare (15)
ava
DenWPF | 24.09.2011, 12:45 #
У меня на странице есть


<style type="text/css" id="preview_style" runat="server" >
.carbin .carbin-article {
background: url("../images/ret.png") no-repeat scroll 0 0 #FFFFFF;
font: 12px Arial;
height: 200px;
margin: 20px 0 0;
overflow: hidden;
position: relative;
width: 200px;
}
...
</style>


мне нужно изменить значение background на url("../images/ret.png") no-repeat scroll 0 0 #FFFF00;

как это сделать?
ava
Amphiluke | 24.09.2011, 13:11 #
Вам нужно изменить стиль существующих в документе элементов с классом carbin-article?

$(".carbin .carbin-article").css("background", "url('../images/ret.png') no-repeat scroll 0 0 #FFFF00");


Или всё-таки изменить конкретно значение CSS-свойства background внутри этой таблицы стилей?
ava
нуп | 24.09.2011, 13:21 #
А как кстати менять само свойство? smile
ava
Amphiluke | 24.09.2011, 13:32 #
Для этого потребуется лезть в свойства объекта CSSStyleSheet, достучаться до которого можно через массив styleSheets (свойство объекта document).
Например (навскидку)

var docStyles = document.styleSheets[0];
var clrRule = docStyles.cssRules[0];
clrRule.style.background = "url('../images/ret.png') no-repeat scroll 0 0 #FFFF00";

Индексы, конечно, зависят от расположения таблицы стилей. Для IE тоже есть свои особенности. smile
ava
нуп | 24.09.2011, 13:58 #
Может вопрос не в тему, но как например вытянуть весь css в строку? Ну что было такое '.style { color:red;} .style2{ color: blue;}'
ava
Amphiluke | 24.09.2011, 14:09 #
нуп, Firebug вам в помощь. Есть волшебная вкладка DOM, в которой можно увидеть все доступные свойства DOM объектов. Если нас в данном случае интересует объект CSSStyleRule, то у него есть свойство cssText, как раз содержащее строку с CSS-правилами, установленными для селектора (который, кстати, доступен из свойства selectorText того же объекта CSSStyleRule).
ava
нуп | 24.09.2011, 14:19 #
Спс
ava
DenWPF | 24.09.2011, 14:48 #
Мне нужно
Цитата


изменить конкретно значение CSS-свойства background внутри этой таблицы стилей



А что нельзя задать id style

<style type="text/css" id="preview_style" runat="server" >


А потом как то задать конкретно ".carbin .carbin-article" а не по индексам?
ava
Amphiluke | 24.09.2011, 16:49 #
Можно, в принципе. Например, используя принципы каскадирования, можно просто перекрыть имеющееся CSS-правило каким-то своим.

<style type="text/css" id="preview_style">
.asdf { color:#ff0; }
.qwerty:before { content:"$$"; }
</style>


var sheet = document.getElementById("preview_style").sheet || document.getElementById("preview_style").styleSheet;
if (sheet.insertRule) {
sheet.insertRule(".asdf { color:orange; }", sheet.cssRules.length);
} else {
sheet.addRule(".asdf", "color:orange");
}

ava
DenWPF | 24.09.2011, 16:58 #
sheet.cssRules.length это что такое?
ava
Amphiluke | 24.09.2011, 16:59 #
Количество CSS-правил в пределах одной таблицы стилей.
ava
DenWPF | 24.09.2011, 19:46 #
не могу понять этот код, что он делает?
ava
Amphiluke | 24.09.2011, 20:54 #
Просто добавляет к таблице стилей CSS-правило, которое перекрывает имеющееся в соответствии с правилом CSS-каскада.

Ну вот например, имеется у вас такая таблица стилей:

Цитата (DenWPF @ 24.9.2011, 16:45 findReferencedText)




<style type="text/css" id="preview_style" runat="server" >

.carbin .carbin-article {
  background: url("../images/ret.png") no-repeat scroll 0 0 #FFFFFF;
  font: 12px Arial;
  height: 200px;
  margin: 20px 0 0;
  overflow: hidden;
  position: relative;
  width: 200px;

}

</style>



Вы пишете, к примеру такой код:

var sheet = document.getElementById("preview_style");
// получаем ссылку на объект CSSStyleSheet (по-разному для IE и остальных браузеров)
sheet = sheet.sheet || sheet.styleSheet;
if (sheet.insertRule) {
sheet.insertRule(".carbin .carbin-article { background: url('../images/ret.png') no-repeat scroll 0 0 #FFFF00; }",
sheet.cssRules.length);
} else { // IE
sheet.addRule(".carbin .carbin-article",
"background: url('../images/ret.png') no-repeat scroll 0 0 #FFFF00");
}

Метод insertRule (addRule для IE) добавляет в таблицу стилей CSS-правило. Сигнатуры методов insertRule и addRule немного отличаются, поэтому для IE приходится писать отдельно. Во второй параметр метода insertRule передаем такое значение (cssRules.length), чтобы добавить правило в самый конец таблицы стилей. Тогда это правило перекроет старое аналогичное правило в соответствии с принципом CSS каскада. IE по умолчанию добавляет правило в конец.
Тогда динамическое строение вашей таблицы стилей становится таким:

<style type="text/css" id="preview_style" runat="server" >
.carbin .carbin-article {
background: url("../images/ret.png") no-repeat scroll 0 0 #FFFFFF;
font: 12px Arial;
height: 200px;
margin: 20px 0 0;
overflow: hidden;
position: relative;
width: 200px;
}
.carbin .carbin-article {
background: url('../images/ret.png') no-repeat scroll 0 0 #FFFF00; /* это правило перекрывает первое */
}
</style>

Добавленное в конец правило перекрывает предыдущее правило для фона, чем и достигается желаемый результат. Сейчас понятно более или менее? smile
ava
DenWPF | 24.09.2011, 21:39 #
Неа, не подходит, меняет у меня человек 10 раз цвет, на 10 строчек больше в css.
Не выход.
ava
Amphiluke | 25.09.2011, 16:03 #
Цитата (DenWPF @ 25.9.2011, 01:39 findReferencedText)
на 10 строчек больше в css

Количество строчек в CSS не меняется. smile Только добавляются элементы в динамический список CSSRuleList. Плюс десять элементов — не так уж и много. Но если не нравится, возвращайтесь к первому варианту с индексами. Не хотите жестко привязываться к индексам — сделайте перебор объектов CSSStyleRule внутри списка CSSRuleList, в цикле считывайте значение свойства selectorText, пока не найдете нужный (.carbin .carbin-article).
А вообще, наверняка, есть решения, не требующие модификации таблицы стилей. В чем проблема в вашем случае? Элементы класса carbin-article добавляются динамически?
Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Mitwirkende
advanced
Absenden