CODEWITHSUNDEEP
javascriptjquerycss
Nikita 웃
Nikita 웃

Reputation: 2060

Remove CSS properties that were set in a CSS file (not inline CSS) [jQuery]

I have a CSS property that was set in a stylesheet file:

.main-outer-div-filter {
    max-height: 230px;
}

I am trying to remove it with jQuery like so:

$('.main-outer-div-filter').css('max-height','');

For some reason, this way doesn't seem to have any affect, it only works if I set the style inline, but not when it is in the CSS file. Is there any way to use jQuery to reset/remove CSS properties, which were set in a CSS file?

Thank you

Upvotes: 2

Views: 958

Answers (3)

Jai
Jai

Reputation: 74738

I would suggest you to use new class name to override it: 

.main-outer-div-filter {
    max-height: 230px;
}
.main-outer-div-filter.override {
    max-height: initial; /* or none; */
}

and in the js you can set it with: 

$('.main-outer-div-filter').addClass('override');

Upvotes: 1

wellagain
wellagain

Reputation: 409

You can overwrite a property with inline style using jQuery, as you are doing now, only you need to set this property to something. If you have a max-height set to 230px and want it to reset completely, then use 'max-height', 'none'

Upvotes: 1

Justinas
Justinas

Reputation: 43441

With ('max-height', '') you are removing inline css. That would work if you set it inline before. To reset it, use initial value:

$(document).ready(function() {
  $('.special').css({
    'max-height': 'initial'
  });
});
li {
  height: 50px;
  border: 1px solid black;
  max-height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Max-height: 20px;</li>
  <li class="special">Max-height: initial;</li>
</ul>

Upvotes: 4

Related Questions