Добавляет ли addClass в JQuery какие-либо существующие стили на основе классов CSS?

Question

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

Хотя я знаю, что могу удалить текущий класс CSS с помощью removeClass (), мне нужны другие стили, которые этот класс предоставляет. Итак, что мне интересно, приводятся следующие примеры: могу ли я переопределить стиль границы с помощью addClass (), у границы уже есть свойство? Я не хочу использовать встроенные стили, поскольку их не так просто поддерживать.

CSS:

.dibHighlight{border:1px solid orange;}

JQuery, который не работает:

$(this).closest('.drop').addClass('dibHighlight'); // Doesn't work

JQuery, который работает:

$(this).closest('.drop').css({ border: "1px solid orange" }); // Works

Answer 1

Вы можете переопределить другие классы, используя addClass в соответствии с правилами Специфичность CSS , так же как классы CSS переопределяют / наследуют свойства друг от друга при использовании атрибута class в элементе.

Причина, по которой ваш второй пример работает, заключается в том, что он эквивалентен установке атрибута style для элемента, который в значительной степени наиболее специфичен в соответствии со спецификой CSS.

И наоборот, первый пример не 'не работает, потому что, вероятно, есть класс CSS, который более специфичен, чем .dibHighlight

Answer 2

Возможно, существует другой класс, который имеет приоритет над dibHighlight, определенным где-то еще в вашем CSS.Вы должны проверить, какие стили / классы применяются к вашему элементу, используя Firebug (или аналогичные инструменты разработчика).

Или для быстрого исправления , попробуйте следующее:

.dibHighlight{border:1px solid orange !important;}

Answer 3

Класс ниже не работает, потому что есть некоторый существующий класс, чей код ниже этого класса в вашем файле CSS.

.dibHighlight{border:1px solid orange;}

, чтобы приведенный ниже код работал, просто вставьте вышеуказанный код CSS в последнюю строку вашего файла CSS.

$(this).closest('.drop').addClass('dibHighlight');

После этого, когда вы добавите класс dibHighlight с addClass в jquery, он переопределит существующий класс аналогичным атрибутом.

Я предлагаю использовать toggleClass() вместо addClass(), потому что даже toggleClass() работает как addClass() в случае, если класс, который вы хотите добавить, еще не существует.