Using !Important in Jquery's CSS() Function

Using !important in jQuery's css() function

Dont apply styles to a class. Apply a class to your div as a style!

Let jQuery do all the work for you

You style sheet should have these classes in them

.ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         width: 518px !important; 
         }

.ui-widget-small { height: 985px;  }

.ui-widget-full { height: 1167px; }

Ok thats your CSS sorted

now your div

 <div id="myWidget" class="ui-widget-overlay ui-widget-small"> YOUR STUFF </div>

Now you can use jQuery to manipulate your divs either by attaching to a button/click/hover whatever it is you wanna use

$('#myWidget').removeClass('ui-widget-small').addClass('ui-widget-full')

And you dont need to use !important - that is really used when you start having issues with large CSS files or several loaded styles.

This is instant but you can also add an effect

$('#myWidget').hide('slow', function(){ $('#myWidget').removeClass('ui-widget-small').addClass('ui-widget-full').show('slow') }  )

You can add styles dynamically to your page like this- and to replace all existing classes with another class, we can use .attr('class', 'newClass') instead.

$('body').prepend('<style type="text/css"> .myDynamicWidget { height: 450px; } </style>')
$('#myWidget').attr('class', 'ui-widget-overlay')
$('#myWidget').addClass('myDynamicWidget')

But you do not want to be over writing your existing styles using this method. This should be used in a 'lost' case scenario. Just demonstrates the power of jQuery

How to apply !important using .css()?

Most of these answers are now outdated, IE7 support is not an issue.

The best way to do this that supports IE11+ and all modern browsers is:

const $elem = $("#elem");
$elem[0].style.setProperty('width', '100px', 'important');

---

Or if you want, you can create a small jQuery plugin that does this.
This plugin closely matches jQuery's own css() method in the parameters it supports:

/**
 * Sets a CSS style on the selected element(s) with !important priority.
 * This supports camelCased CSS style property names and calling with an object 
 * like the jQuery `css()` method. 
 * Unlike jQuery's css() this does NOT work as a getter.
 * 
 * @param {string|Object<string, string>} name
 * @param {string|undefined} value
 */   
jQuery.fn.cssImportant = function(name, value) {
  const $this = this;
  const applyStyles = (n, v) => {
    // Convert style name from camelCase to dashed-case.
    const dashedName = n.replace(/(.)([A-Z])(.)/g, (str, m1, upper, m2) => {
      return m1 + "-" + upper.toLowerCase() + m2;
    }); 
    // Loop over each element in the selector and set the styles.
    $this.each(function(){
      this.style.setProperty(dashedName, v, 'important');
    });
  };
  // If called with the first parameter that is an object,
  // Loop over the entries in the object and apply those styles. 
  if(jQuery.isPlainObject(name)){
    for(const [n, v] of Object.entries(name)){
       applyStyles(n, v);
    }
  } else {
    // Otherwise called with style name and value.
    applyStyles(name, value);
  }
  // This is required for making jQuery plugin calls chainable.
  return $this;
};

// Call the new plugin:
$('#elem').cssImportant('height', '100px');

// Call with an object and camelCased style names:
$('#another').cssImportant({backgroundColor: 'salmon', display: 'block'});

// Call on multiple items:
$('.item, #foo, #bar').cssImportant('color', 'red');

Example jsfiddle here.

How to include !important in jquery

Apparently it's possible to do this in jQuery:

$("#tabs").css("cssText", "height: 650px !important;");

Src: http://bugs.jquery.com/ticket/2066

Adding !important with jQuery

Best way is to create a new CSS style with margin !important and add the CSS to the element.

CSS:

.zeroMargin { margin: 0 !important; }

and then in JS:

myEm.css({"position":"fixed", "top":"50px", "left":"50px"}).addClass('zeroMargin');

Alternatively, You can also do that entirely with JS using cssText

myEm.css("cssText", "margin:0 !important;position:fixed;top:50px;left:50px;"});

This is equivalent to setting the style.cssText property of that element. So you may not need an !important in that case..

To preserve you can use a function like below,

$('#cssTest').css('cssText', function(i, v) {  return this.style.cssText + ';border-color: blue !important;';});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="cssTest" style="border: 1px solid red !important; width: 100px; height: 100px;"></div>

How to add !important in position:absolute using jQuery.css() function?

jQuery is not understanding the !important attribute.

You can use attr()

Try:

 $('body div.at4m-dock').attr('style', 'font-size: 200% !important;position:absolute !important;');

DEMO

Overriding !important with css or jquery

Here you go:

$( '.someclass' ).each(function () {
    this.style.setProperty( 'border', 'none', 'important' );
});

Live demo: http://jsfiddle.net/Gtr54/

The .setProperty method of an element's style object enables you to pass a third argument which represents the priority. So, you're overriding an !important value with your own !important value. As far as I know, it is not possible to set the !important priority with jQuery, so your only option is the built-in .setProperty method.

Extend jquery.css function to override !important styles

If the browser supports Proxy (ES6), you can use this plugin:

if ( // Check browser support
  window.Proxy
  && window.CSSStyleDeclaration
  && CSSStyleDeclaration.prototype.setProperty
) {
  jQuery.cssHooks = new Proxy(jQuery.cssHooks, {
    get: function(hooks, name) {
      return new Proxy(hooks[name] || (hooks[name] = {}), {
        has: function (hook, setget) {
          return setget === 'set' || setget in hook;
        },
        get: function (hook, setget){
          if(setget !== 'set') return hook[setget];
          return function(elem, value, extra) {

            // Use the cssHook setter, if any
            if(hook.set) {
              value = hook.set(elem, value, extra);
              if(value === void 0) return; // No value
            }

            // Set the desired value without !important
            elem.style[ name ] = value;

            // Get the computed value
            var computedValue = jQuery.css(elem, name);

            // Check if the computed value is the desired one
            if(computedValue === value) return; // OK

            // Set the desired value with !important
            elem.style.setProperty(name, value, "important");

            // Check if the computed value has changed
            if(computedValue !== jQuery.css(elem, name)) return; // OK

            // Otherwise !important is not needed, so remove it
            elem.style.setProperty(name, value);
          }
        }
      });
    }
  });
}

// Plugin compiled with Closure Compilerwindow.Proxy&&window.CSSStyleDeclaration&&CSSStyleDeclaration.prototype.setProperty&&(jQuery.cssHooks=new Proxy(jQuery.cssHooks,{get:function(f,b){return new Proxy(f[b]||(f[b]={}),{has:function(b,a){return"set"===a||a in b},get:function(e,a){return"set"!==a?e[a]:function(d,c,a){if(e.set&&(c=e.set(d,c,a),void 0===c))return;d.style[b]=c;a=jQuery.css(d,b);a!==c&&(d.style.setProperty(b,c,"important"),a===jQuery.css(d,b)&&d.style.setProperty(b,c))}}})}}));
// The elements in the collection that need !important will use it$('.color').css('color', 'blue');
// The plugin is compatible with custom cssHooks$.cssHooks.opacity.set = function(elem, value) { return value/4 + '' };$('.opacity').css('opacity', .8);

.color {   color: red;}.color.important {   color: red !important;}.opacity.important {   opacity: 1 !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color">color: blue</div><div class="color important">color: blue !important</div><div class="opacity important">opacity: .2 !important</div>

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

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

---

Related Topics