Let's say I have a div.foo with this CSS:
.foo {
height: 70vh;
}
And I change the height of div.foo with jQuery like this:
$('.foo').height(100);
How do I reset the CSS of div.foo so its height is rendered 70vh again?
One solution that works is to reload the entire CSS file this way. But I wonder if there is a solution to only reset the CSS of div.foo, not the entire stylesheet?
With jQuery, you are adding your styles to the style attribute of the element. It is removed again, if you call the function again with an empty string (""). This will remove the property in the style attribute.
If you have e.g. this command:
$('.foo').css('height', '100px');
You can revoke it by
$('.foo').css('height', '');
See also the discussion here: https://stackoverflow.com/a/4036868/3233827
$('.foo).height(''); should be sufficient to erase the style applied by jQuery
You can remove the style attribute from the element. This attribute holds any dynamic styles.
$('.foo').css('background', 'teal');
$('#reset').click(function() {
$('.foo').removeAttr('style');
});.foo {
height:100px;
width:100px;
background:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="foo"></div>
<p><button id="reset">Reset style</button></p>
