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

Question

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

.Foo
{
  width:20px;
}

Используя Jquery, я хотел бы сделать что-то похожее на событие:

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

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

РЕДАКТИРОВАТЬ: я понял свою проблему. Эта команда на самом деле работает. В моем конкретном приложении я не создавал элементы с помощью класса до того, как использовал команду, поэтому при их создании ничего не изменилось.

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

Answer 1

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

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

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

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

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

Answer 3

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

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

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

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

Answer 4

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

Answer 5

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

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

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

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

Answer 6

Я получил этот пример в помощи CSS API в JQuery API.

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

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

Answer 7

Это может помочь вам.. $(".Foo"). Css("width", "40px");

Answer 8

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

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

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