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() をセッターとして使用すると、jQuery は要素のスタイル プロパティを変更します。

于 2013-10-01T16:14:10.330 に答える
0

いいえ、私の知る限り、CSS ルール自体を上書きすることはできません。
.css()は、要素の style 属性にのみ書き込みます。これは、最も高い特異性を持っています。

別の方法は、より特異性の高い 2 番目のクラスを追加することですが、それでも同じことを行うことになります。このアプローチの主な利点は、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 に答える