Изменение правила CSS в классе с помощью JQuery

У меня есть класс в CSS

.Foo
{
  width:20px;
}

Использование JQuery Я хотел бы сделать что-то подобное этому событию:

$(".Foo").css("width", "40px");

Это не работает. Это неправильный подход? Должен ли я использовать addClass() и removeClass()?

EDIT: Я понял свою проблему. Эта команда действительно работает. В моем конкретном приложении я не создал элементы, использующие класс, прежде чем я использовал команду, поэтому, когда они были созданы, ничего не было изменено.

В основном эта команда не изменяет правило стиля CSS, а только элементы, использующие класс.

Ответ 1

jQuery.css найдет все существующие элементы на странице с классом Foo, а затем установите их встроенный стиль width на 40px.

Другими словами, это не создает или не изменяет правило css - если вы динамически добавляете элемент с классом Foo, он все равно будет иметь ширину 20px, потому что его встроенный стиль не имеет было установлено, чтобы переопределить правило CSS по умолчанию.

Вместо этого вы должны использовать addClass и removeClass и управлять стилями в своем статическом CSS.

Ответ 2

Вы можете изменить правило стиля CSS. Вам нужно посмотреть:

document.styleSheets коллекция
styleSheet.cssRules свойство (или styleSheet.rules для IE7 и IE8)
rule.selectorText свойство
rule.style свойство

Например:

var ss = document.styleSheets[0];
var rules = ss.cssRules || ss.rules;
var fooRule = null;
for (var i = 0; i < rules.length; i++)
{
    var rule = rules[i];
    if (/(^|,) *\.Foo *(,|$)/.test(rule.selectorText))
    {
        fooRule = rule;
        break;
    }
}
fooRule.style.width = "40px";

Рабочая демонстрация: jsfiddle.net/kdp5V

Ответ 3

вы можете добавить стиль вручную в заголовок с помощью jquery:

  $('head').append('<style id="addedCSS" type="text/css">.Foo {width:40px;}</style>');

затем измените его на событие, например, например. так:

  $(window).resize(function(){
     $('#addedCSS').text('.Foo {width:80px;}');
  });

Ответ 4

Да, вы должны использовать addClass и removeClass для изменения стиля. В вашем css определите пару разных классов и переключайтесь между ними.

Ответ 5

Вы должны выбрать элемент с jQuery. Вы знаете, что вы не выбираете сам класс CSS, правильно?

После того, как у вас есть элемент с class= "Foo", вы можете выбрать его так же, как и у вас, и либо установить свойства css вручную, как вы пытаетесь сделать, либо вы можете использовать класс add следующим образом:

$ ( "Foo" ) addClass ( 'Foo');.

Конечно, конечно, поскольку вы выбираете тот же класс, который вы добавляете, это не имеет смысла.

Ответ 6

Я получил пример thsi в CSS api help в JQuery API.

это сработало для меня: http://jsfiddle.net/LHwL2/

для полной помощи прочитайте css api в http://api.jquery.com/css/

Ответ 7

Попробуйте использовать несколько стилей

.FooSmall
{
  width:20px;
}
.FooBig
{
  width:40px;
}

$('#theTarget').removeClass('FooSmall').addClass('FooBig');

Ответ 8

Это может сработать для вас. $ ( ". Foo" ). Css ( "width", "40px" );