Modifying a Matched CSS Rule

Question

Im wondering if it possible to modify a matched CSS rule's height using jquery/javascript.

This is my code so far:

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>

I have a checkbox you can select which will fade in a hidden div and then increase the height of another div to fit the new section in. I was hoping it would just modify the height of the css match provided in the css. However, instead it sets the element.style of the current div to set height. is it possible to just modify the matched CSS rule?

This should be done without JS. You should be able to match the height, I would setup 2 jsfiddles one without the match js and one with to see which one works the best. Let me know when you have the css one cause this is easy. — Cam, Oct 01 '13 at 16:13
[Are you talking something like this](http://stackoverflow.com/questions/18899448/is-possible-to-make-an-important-property-value-from-css-selector-a-non-importan/18899540#18899540)(`Check updated js`). — The Alpha, Oct 01 '13 at 16:22

score 1 · Accepted Answer · answered Oct 01 '13 at 16:14

1

css() only works over the inline styles:

When using .css() as a setter, jQuery modifies the element's style property.

answered Oct 01 '13 at 16:14

Alvaro

40,778
30
164
336

score 1 · Answer 2 · answered Oct 01 '13 at 16:43

There are two problems with your code, AFAICS.

You must use $(this).prop("checked") instead of attr()
In the else branch, you must either use the selector input:not(:checked) or omit the :checked altogether

$('.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

Or you could use `$(this).is(":checked")`, like in [this example](http://jsfiddle.net/4ezAL/2/) — ShadowScripter, Oct 01 '13 at 16:45

ShadowScripter · Answer 3 · 2013-10-01T16:51:54.180

No, you can't overwrite the CSS rule itself as far as I know.
.css() only writes to the the element's style attribute, which has the highest specificity.

An alternative would be to add a second class with a higher specificity, but you'd still kinda be doing the same thing. The main advantage to this approach is that you remove css stuff from javascript, which makes it unobtrusive.

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

I like this suggestion, however, my snippet includes only 1 of the few divs that need to be faded in. In the situation where a user could select 3-4 divs, the height will be need to be adjusted multiple times and kept track of. — Kizzim, Oct 01 '13 at 17:03

Modifying a Matched CSS Rule

3 Answers3