How to include !important in jquery
JqueryJquery Problem Overview
I am trying to add !important in the css attribute using jQuery like
$("tabs").css('height','650px;!important');
but !important has no effect. How to include !important in jquery?
Jquery Solutions
Solution 1 - Jquery
Apparently it's possible to do this in jQuery:
$("#tabs").css("cssText", "height: 650px !important;");
Solution 2 - Jquery
I solved this problem with:
inputObj.css('cssText', inputObj.attr('style')+'padding-left: ' + (width + 5) + 'px !IMPORTANT;');
So no inline-Style is lost, an the last overrides the first
Solution 3 - Jquery
It is also possible to add more important properties:
inputObj.attr('style', 'color:black !important; background-color:#428bca !important;');
Solution 4 - Jquery
var tabsHeight = 650;
$("tabs").attr('style', 'height: '+ tabsHeight +'px !important');
OR
#CSS
.myclass{height:650px !important;}
then
$("tabs").addClass("myclass");
Solution 5 - Jquery
If you need to have jquery use !important for more than one item, this is how you would do it.
e.g. set an img
tags max-width and max-height to 500px each
$('img').css('cssText', "max-width: 500px !important;' + "max-height: 500px !important;');
Solution 6 - Jquery
For those times when you need to use jquery to set !important properties, here is a plugin I build that will allow you to do so.
$.fn.important = function(key, value) {
var q = Object.assign({}, this.style)
q[key] = `${value} !important`;
$(this).css("cssText", Object.entries(q).filter(x => x[1]).map(([k, v]) => (`${k}: ${v}`)).join(';'));
};
$('div').important('color', 'red');
Solution 7 - Jquery
If you really need to override css that has !important rules in it, for instance, in a case I ran into recently, overriding a wordpress theme required !important scss rules to break the theme, but since I was transpiling my code with webpack and (I assume this is why --)my css came along in the chain after the transpiled javascript, you can add a separate class rule in your stylesheet that overrides the first !important rule in the cascade, and toggle the heavier-weighted class rather than adjusting css dynamically. Just a thought.
Solution 8 - Jquery
You don't need !important
when modifying CSS with jQuery since it modifies the style
attribute on the elements in the DOM directly. !important
is only needed in stylesheets to disallow a particular style rule from being overridden at a lower level. Modifying style
directly is the lowest level you can go, so !important
has no meaning.