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

Question

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

Use classes instead of that, you can't reset CSS proprieties to initial values — Adam Azad
– Adam Azad, Commented Jan 21, 2016 at 7:41
jQuery's .css() method adds inline style to the matched elements. Since the specificity value of inline style is higher than any CSS selectors, it should get applied actually. I suggest you have a look to your web browser devtools to figure it out. As an aside, in the context of CSS it is called a property, not an attribute. — Hashem Qolami
– Hashem Qolami, Commented Jan 21, 2016 at 7:47
By any chance, if you want to modify the external stylesheet in DOM, you can use document.styleSheets object (along with its methods). But jQuery doesn't provide any tools for that. Therefore you should do it with pure JavaScript. — Hashem Qolami
– Hashem Qolami, Commented Jan 21, 2016 at 8:06
@CreativeMind I think it is already answered on S.O. You might want to have a look at: Can jQuery change css style definition topic. You could also find some examples here. — Hashem Qolami
– Hashem Qolami, Commented Jan 21, 2016 at 8:24

Justinas · Accepted Answer · 2016-01-21 07:47:31Z

4

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>

answered Jan 21, 2016 at 7:47

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wellagain · Accepted Answer · 2016-01-21 07:49:53Z

1

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'

answered Jan 21, 2016 at 7:49

wellagain

4095 silver badges11 bronze badges

Comments

Jai · Accepted Answer · 2016-01-21 07:54:35Z

1

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');

answered Jan 21, 2016 at 7:54

Jai

74.8k12 gold badges77 silver badges104 bronze badges

2 Comments

Annie Trubak Over a year ago

yes, he could use new classes or inline CSS, as I believe he knows, but that's not the question

Jai Over a year ago

@AnnieTrubak then the answer is very short: No!! can't be done.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related