0

我想知道是否可以使用 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 规则？

4

3 回答 3

1

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

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

于 2013-10-01T16:14:10.330 回答
1

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

于 2013-10-01T16:43:08.283 回答
0

不，据我所知，您不能覆盖 CSS 规则本身。
.css()只写入元素的 style 属性，它具有最高的特异性。

另一种方法是添加具有更高特异性的第二类，但您仍然会做同样的事情。这种方法的主要优点是您可以从 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");
    }
});
于 2013-10-01T16:29:20.440 回答