Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Изменить css с помощью jquery 
:(
    Опции темы
DenWPF
Дата 24.9.2011, 12:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1659
Регистрация: 26.9.2009

Репутация: нет
Всего: 1



У меня на странице есть 

Код

 <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;

как это сделать?
PM MAIL   Вверх
Amphiluke
Дата 24.9.2011, 13:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Вам нужно изменить стиль существующих в документе элементов с классом carbin-article?
Код

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


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


Это сообщение отредактировал(а) Amphiluke - 24.9.2011, 13:12
PM   Вверх
нуп
Дата 24.9.2011, 13:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ботокодер
**


Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33



А как кстати менять само свойство?  smile 
PM MAIL   Вверх
Amphiluke
Дата 24.9.2011, 13:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Для этого потребуется лезть в свойства объекта 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 
PM   Вверх
нуп
Дата 24.9.2011, 13:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ботокодер
**


Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33



Может вопрос не в тему, но как например вытянуть весь css в строку? Ну что было такое '.style { color:red;} .style2{ color: blue;}'
PM MAIL   Вверх
Amphiluke
Дата 24.9.2011, 14:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



нуп, Firebug вам в помощь. Есть волшебная вкладка DOM, в которой можно увидеть все доступные свойства DOM объектов. Если нас в данном случае интересует объект CSSStyleRule, то у него есть свойство cssText, как раз содержащее строку с CSS-правилами, установленными для селектора (который, кстати, доступен из свойства selectorText того же объекта CSSStyleRule).

Это сообщение отредактировал(а) Amphiluke - 24.9.2011, 14:11
PM   Вверх
нуп
Дата 24.9.2011, 14:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ботокодер
**


Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33



Спс
PM MAIL   Вверх
DenWPF
Дата 24.9.2011, 14:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1659
Регистрация: 26.9.2009

Репутация: нет
Всего: 1



Мне нужно
 
Цитата

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


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

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


А потом как то задать конкретно ".carbin .carbin-article" а не по индексам?
PM MAIL   Вверх
Amphiluke
Дата 24.9.2011, 16:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Можно, в принципе. Например, используя принципы каскадирования, можно просто перекрыть имеющееся 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");
}


PM   Вверх
DenWPF
Дата 24.9.2011, 16:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1659
Регистрация: 26.9.2009

Репутация: нет
Всего: 1



 sheet.cssRules.length это что такое?
PM MAIL   Вверх
Amphiluke
Дата 24.9.2011, 16:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Количество CSS-правил в пределах одной таблицы стилей.

PM   Вверх
DenWPF
Дата 24.9.2011, 19:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1659
Регистрация: 26.9.2009

Репутация: нет
Всего: 1



не могу понять этот код, что он делает?
PM MAIL   Вверх
Amphiluke
Дата 24.9.2011, 20:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Просто добавляет к таблице стилей CSS-правило, которое перекрывает имеющееся в соответствии с правилом CSS-каскада.

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

Цитата(DenWPF @  24.9.2011,  16: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>


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

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

Это сообщение отредактировал(а) Amphiluke - 24.9.2011, 21:07
PM   Вверх
DenWPF
Дата 24.9.2011, 21:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1659
Регистрация: 26.9.2009

Репутация: нет
Всего: 1



Неа, не подходит, меняет у меня человек 10 раз цвет, на 10 строчек больше в css.
Не выход.
PM MAIL   Вверх
Amphiluke
Дата 25.9.2011, 16:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112



Цитата(DenWPF @  25.9.2011,  01:39 Найти цитируемый пост)
на 10 строчек больше в css

Количество строчек в CSS не меняется.  smile  Только добавляются элементы в динамический список CSSRuleList. Плюс десять элементов — не так уж и много. Но если не нравится, возвращайтесь к первому варианту с индексами. Не хотите жестко привязываться к индексам — сделайте перебор объектов CSSStyleRule внутри списка CSSRuleList, в цикле считывайте значение свойства selectorText, пока не найдете нужный (.carbin .carbin-article).
А вообще, наверняка, есть решения, не требующие модификации таблицы стилей. В чем проблема в вашем случае? Элементы класса carbin-article добавляются динамически?
PM   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0513 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.