Javascript 修改匹配的CSS规则

我想知道是否可以使用jquery/javascript修改匹配的CSS规则的高度

这是我目前的代码：

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匹配的高度。但是，它会将当前div的element.style设置为“设置高度”。是否可以只修改匹配的CSS规则？

仅适用于内联样式：

当使用.css作为setter时，jQuery修改元素的style属性

---

不，据我所知，你不能覆盖CSS规则本身。 仅写入元素的样式属性，该属性具有最高的

另一种选择是添加具有更高特异性的第二个类，但您仍然在做同样的事情。这种方法的主要优点是可以从javascript中删除css内容，这使得它不引人注目

CSS

.ac容器输入：选中~article.prorate{ 高度：450px； } .ac容器输入：选中~article.prorate.fadein{ 高度：497px； } 1.按比例纳税{ 显示：无； 背景：CEF6CE； } JQuery

$'.checkTax'.changefunction{ 如果$this.is:已选中{ $“.prorateTax”.fadeIn； $'.ac容器输入：选中~article.prorate'.addClassfadein； }否则{ 美元。按比例纳税。淡出； $'.ac容器输入：选中~article.prorate'.removeClassfadein； } };

---

您的代码有两个问题，AFAICS

您必须使用$this.propchecked而不是attr 在else分支中，必须使用选择器输入：not:checked或完全忽略：checked $'.checkTax'.changefunction{ 如果$this.prop“checked”{ $“.prorateTax”.fadeIn； $'.ac容器输入：选中~article.prorate'.csheight，+=47px； }否则{ 美元。按比例纳税。淡出； $'.ac容器输入：未选中~article.prorate'.csheight，-=47px； } };

---

这应该在没有JS的情况下完成。您应该能够匹配高度，我将设置2个JSFIDLE，一个没有匹配js，另一个有，以查看哪一个工作得最好。如果你有css one，请告诉我，因为这很简单。请同时显示HTML代码。检查更新的js。或者你可以使用$this。is:checked，就像我喜欢这个建议，但是，我的代码片段只包括需要淡入的几个div中的一个。在用户可以选择3-4个div的情况下，需要多次调整高度并保持跟踪。