le0m le0m - 5 months ago 19
CSS Question

How to reload or rerender CSS for a single HTML element?

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?

Answer

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: http://stackoverflow.com/a/4036868/3233827

Comments