Как изящно переопределить старый css с помощью нового css jQuery?

Question

У меня есть Div элемент, с помощью CSS -> класс 1, как следующие коды:

<style type="text/css"> 
    .class1 {width: 100px !important;padding-top:10px;margin-bottom: 22px;} 
</style> 

<div class="class1"></div> 

Моя цель, чтобы изменить ширину этого Div элемента в 300px. Мое оригинальное решение довольно прямо вперед с помощью JQuery:

$('div').find(".class1").each(function() { 
     this.style.setProperty( "width", "300px", "important"); 
}); 

Однако наш технический руководитель думал, что это так Hacky, и попросил меня сделать это как часть таблицы стилей вместо этого.

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

Итак, мой план, чтобы добавить новый класс CSS -> Class2, а затем попытаться добавить/применить этот новый класс сНа элемента, как следующее:

<style type="text/css"> 
     .class2 {width: 300px !important;} 
</style> 

$('div').find(".class1").each(function() { 
     $(this).addClass("class2"); 
}); 

Однако class1 все еще выше приоритет, чем класс2, поэтому ширина по-прежнему равна 100px.

Это означает, что мне нужно удалить Class1, прежде чем применяется класс 2, как

$('div').find(".class1").each(function() { 
     $(this).removeClass("class1").addClass("class2"); 
}); 

Но, если class1 имеет множество настроек/свойств, это означает, что мне нужно скопировать их в class2 для сохранения результата все тот же , кроме ширины.

Есть ли элегантный способ «только» переопределить настройку ширины класса 1, если класс2 содержит только новую настройку ширины?

Answer 1

Я хотел бы задать правило CSS следующим образом:

.class1.class2 { width: 300px !important}; 

, и вы можете добавить его либо к вложенной таблице стилей или внешнему стилей.

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

Правило CSS с .class1.class2 будет иметь более высокую селективность, чем .class1, и переопределить настройку ширины.

Используя этот подход, вы не должны удалить class1 из атрибута class, и вы не должны слишком беспокоиться о том, определяется правилом для .class1 до или после .class1.class2.