What is the best way to apply the !important property in jQuery for CSS styling?

Question

When setting the CSS property "padding-top" to a value stored in a variable (currentHeight), such as:

jQuery("#page-container").css("padding-top", currentHeight);

It functions correctly and produces:

<div id="page-container" style="padding-top: 115px;">
...

However, the padding-top property needs to be !important like this:

<div id="page-container" style="padding-top: 115px!important;">
...

If attempting to add !important like this:

jQuery('#page-container').css({'padding-top': currentHeight + '!important'});

The CSS property "padding-top" is not applied to the element page-container, resulting in:

<div id="page-container">

How can this issue be resolved?

Thank you

Answer 1

Answer №1

Unfortunately, using the !important property in jQuery is not feasible.

One possible workaround is to:

.addPadding{
  padding-top: 115px !important;
}

jQuery('#page-container').addClass('addPadding');

jQuery('#page-container').addClass('addPadding');

.addPadding{
  padding-top: 115px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page-container">
  <h1>Test</h1>
</div>

Answer 2

Unfortunately, using the !important property in jQuery is not feasible.

One possible workaround is to:

.addPadding{
  padding-top: 115px !important;
}

jQuery('#page-container').addClass('addPadding');

jQuery('#page-container').addClass('addPadding');

.addPadding{
  padding-top: 115px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page-container">
  <h1>Test</h1>
</div>