Question

我想知道是否可以使用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设置为set height。是否可以只修改匹配的CSS规则？

Answer 1

css()仅适用于内联样式：

当使用.css（）作为setter时，jQuery会修改元素的样式属性。

Answer 2

您的代码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

Answer 3

不，据我所知，你不能覆盖CSS规则本身 .css()仅写入元素的style属性，该属性具有最高specificity。

另一种方法是添加具有更高特异性的第二类，但你仍然有点做同样的事情。这种方法的主要优点是你从javascript中删除css的东西，这使它不引人注目。

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");
    }
});

修改匹配的CSS规则

3 个答案: