-1

I need to remove a !important-attribute from an element using jQuery. Is that possible?

While I wanted to create a js-fiddle for it, I noticed it doesn't even work with a not-!important style:

http://jsfiddle.net/u4q2P/2/

What's wrong with my code?

So if someone could explain why jQuery doesn't remove the CSS-property like how it's supposed to be (see f.e. http://www.bennadel.com/blog/2442-Clearing-Inline-CSS-Properties-With-jQuery.htm)

Raphael Jeger
  • 5,024
  • 13
  • 48
  • 79
  • that does not answer my question why it doesn't even remove non-important attributes - but thanks for the downvotes to those that didn't even read the question – Raphael Jeger Apr 26 '13 at 09:02
  • It does answer your first question, your second is irrelevant to the first and your title. – dsgriffin Apr 26 '13 at 09:03
  • 2
    why using jquery when you can use the backspace button? – enb081 Apr 26 '13 at 09:07
  • what using backspace? Do you really think I'm not clever enough to just delete the important-rule if that would be a viable solution? Such an answer is even getting upvotes?? – Raphael Jeger Apr 26 '13 at 09:08
  • I'm tryng to say that if you want to set a property, just set it via jquery with !important, you don't need to remove the !important from the existing property. – enb081 Apr 26 '13 at 09:12
  • I have set the actual property in my actual code on a specific element to margin: 0px !important which overrides the class on that element which has margin: 20px and I need to reset it to margin: 20px via jQuery (just believe me) and I can't remove the overwrite via jQuery – Raphael Jeger Apr 26 '13 at 09:15

4 Answers4

5

I think you need to use attr() and set !important inside your style value to override it:

$('#myButton').on('click', function () {
    $('#myDiv').attr('style', 'padding: 0px !important;');
})

Fiddle

Eli
  • 14,779
  • 5
  • 59
  • 77
3

I guess you want the padding to be default again?

If you want the default value of padding back: http://jsfiddle.net/u4q2P/4/

$('#myButton').on('click', function () {
    $('#myDiv').css('padding', 'inherit');
})

Edit, since the question is not very clear I made this edit

If you want to set the padding to 0 you use: http://jsfiddle.net/u4q2P/5/

$('#myButton').on('click', function () {
    $('#myDiv').css('padding','0px');
})

And if you had made a good jsfiddle we could help you in seconds: http://jsfiddle.net/u4q2P/6/

$('#myButton').on('click', function () {
    $('#myDiv').attr('style', 'padding: 0px !important');
})
Ron van der Heijden
  • 14,803
  • 7
  • 58
  • 82
1

Orignally taken from Can I use jquery to remove/negate css !important rule? Unfortunately, you cannot override !important without using !important as inline/internal style below the included theirs.css.

You can define a !important style and add it to .stubborn then adjust the opacity.. See below,

CSS:

div.hidden_block_el { 
   display: block !important;
   opacity: 0;
}

JS:

$('.stubborn')
.addClass('hidden_block_el')
.animate({opacity: 1});

DEMO: http://jsfiddle.net/jjWJT/1/

Alternate approach (inline),

$('.stubborn')
.attr('style', 'display: block !important; opacity: 0;')
.animate({opacity: 1});
Community
  • 1
  • 1
The Mechanic
  • 2,301
  • 1
  • 26
  • 37
0

An empty style is nothing. Put in a 0 or something at the padding :)

$('#myButton').on('click', function () {
    $('#myDiv').css('padding', '0');
})
CaptainCarl
  • 3,411
  • 6
  • 38
  • 71