Изменение согласованного правила CSS

Question

Мне интересно, можно ли изменить высоту правила сопоставленного CSS с помощью jquery/javascript.

Это мой код до сих пор:

CSS

.ac-container input:checked ~ article.prorate{ 
    height: 450px; 
} 

.prorateTax { 
    display: none; 
    background: #CEF6CE; 
} 

JQuery

<script type="text/javascript"> 
$('.checkTax').change(function() { 
    if ($(this).attr("checked")) { 
     $('.prorateTax').fadeIn(); 
     $('.ac-container input:checked ~ article.prorate').css("height", "+=47px"); 
    } else { 
     $('.prorateTax').fadeOut(); 
     $('.ac-container input:checked ~ article.prorate').css("height", "-=47px"); 
    } 
}); 
</script> 

У меня есть флажок вы можете выбрать, какой будет исчезать в скрытый DIV, а затем увеличить высоту другого div, чтобы он соответствовал новому разделу. Я надеялся, что он просто изменит высоту css-совпадения, предоставленную в css. Однако вместо этого он устанавливает element.style текущего div для установки высоты. можно ли просто изменить согласованное правило CSS?

Answer 1

css() работает только над стилями инлайн:

При использовании .css() как сеттер, JQuery изменяет свойство стиля элемента.

Answer 2

Нет, вы не можете перезаписать правило CSS, насколько я знаю.
.css() только записывает в атрибут стиля элемента, который имеет самый высокий specificity.

Альтернативой было бы добавить второй класс с более высокой специфичностью, но вы все равно будете делать то же самое. Основное преимущество этого подхода заключается в том, что вы удаляете css-материал из javascript, что делает его ненавязчивым.

CSS

.ac-container input:checked ~ article.prorate{ 
    height: 450px; 
} 

.ac-container input:checked ~ article.prorate.fadein{ 
    height: 497px; 
} 

.prorateTax { 
    display: none; 
    background: #CEF6CE; 
} 

JQuery

$('.checkTax').change(function() { 
    if ($(this).is(":checked")) { 
     $('.prorateTax').fadeIn(); 
     $('.ac-container input:checked ~ article.prorate').addClass("fadein"); 
    } else { 
     $('.prorateTax').fadeOut(); 
     $('.ac-container input:checked ~ article.prorate').removeClass("fadein"); 
    } 
}); 

Answer 3

Есть две проблемы с вашим кодом, AFAICS.

• Вы должны использовать $(this).prop("checked") вместо attr()
• В else ветви, вы должны либо использовать селектор input:not(:checked) или опустить :checked вообще

$('.checkTax').change(function() { 
    if ($(this).prop('checked')) { 
     $('.prorateTax').fadeIn(); 
     $('.ac-container input:checked ~ article.prorate').css("height", "+=47px"); 
    } else { 
     $('.prorateTax').fadeOut(); 
     $('.ac-container input:not(:checked) ~ article.prorate').css("height", "-=47px"); 
    } 
}); 

JSFiddle