Comment appliquer !important l'utilisation .(css)?

Question

J'ai de la difficulté d'appliquer un style c'est - !important. J'ai essayé:

$("#elem").css("width", "100px !important");

Ce n'est rien; pas de largeur de style, tout ce qui est appliquée. Est-il un jQuery-ish sorte d'application de ce style sans avoir à écraser cssText (ce qui voudrait dire que j'avais besoin d'analyser tout d'abord, etc.)?

Edit: je dois ajouter que j'ai une feuille de style avec un !important style que j'essaie de le remplacer avec un !important style inline, donc à l'aide d' .width() et l'envie de ne pas travailler car elle est remplacée par mon externe !important style.

Aussi, la valeur remplace la valeur précédente est calculée, donc je ne peux pas tout simplement créer un autre style externe.

Answer 1

Le problème est causé par jQuery ne pas comprendre l' !important d'attribut, et, comme telle, ne parvient pas à appliquer la règle.

Vous pourriez être en mesure de contourner le problème, et appliquer la règle en s'y référant, par addClass():

.importantRule { width: 100px !important; }

$('#elem').addClass('importantRule');

Ou en utilisant attr():

$('#elem').attr('style', 'width: 100px !important');

La dernière approche, qui permettrait d'annuler toute déjà mis en ligne les règles de style, cependant. Donc à utiliser avec précaution.

Bien sûr, il y a un bon argument que @Nick Craver méthode est plus facile/plus sage.

Ci-dessus, attr() approche légèrement modifié pour préserver l'original style chaîne de caractères/propriétés:

$('#elem').attr('style', function(i,s) { return s + 'width: 100px !important;' });

Answer 2

Je crois que j'ai trouvé une solution réelle. Je l'ai fait dans une nouvelle fonction:

jQuery.style(name, value, priority);

Vous pouvez l'utiliser pour obtenir les valeurs avec .style('name') comme .css('name'), obtenir l'objet CSSStyleDeclaration avec .style(), et également de définir des valeurs - avec la possibilité de spécifier la priorité comme "importantes". Voir https://developer.mozilla.org/en/DOM/CSSStyleDeclaration.

Démo

var div = $('someDiv');
console.log(div.style('color'));
div.style('color', 'red');
console.log(div.style('color'));
div.style('color', 'blue', 'important');
console.log(div.style('color'));
console.log(div.style().getPropertyPriority('color'));

Voici le résultat:

null
red
blue
important

La Fonction

(function($) {    
  if ($.fn.style) {
    return;
  }

  // Escape regex chars with \
  var escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
  };

  // For those who need them (< IE 9), add support for CSS functions
  var isStyleFuncSupported = !!CSSStyleDeclaration.prototype.getPropertyValue;
  if (!isStyleFuncSupported) {
    CSSStyleDeclaration.prototype.getPropertyValue = function(a) {
      return this.getAttribute(a);
    };
    CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) {
      this.setAttribute(styleName, value);
      var priority = typeof priority != 'undefined' ? priority : '';
      if (priority != '') {
        // Add priority manually
        var rule = new RegExp(escape(styleName) + '\\s*:\\s*' + escape(value) +
            '(\\s*;)?', 'gmi');
        this.cssText =
            this.cssText.replace(rule, styleName + ': ' + value + ' !' + priority + ';');
      }
    };
    CSSStyleDeclaration.prototype.removeProperty = function(a) {
      return this.removeAttribute(a);
    };
    CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) {
      var rule = new RegExp(escape(styleName) + '\\s*:\\s*[^\\s]*\\s*!important(\\s*;)?',
          'gmi');
      return rule.test(this.cssText) ? 'important' : '';
    }
  }

  // The style function
  $.fn.style = function(styleName, value, priority) {
    // DOM node
    var node = this.get(0);
    // Ensure we have a DOM node
    if (typeof node == 'undefined') {
      return this;
    }
    // CSSStyleDeclaration
    var style = this.get(0).style;
    // Getter/Setter
    if (typeof styleName != 'undefined') {
      if (typeof value != 'undefined') {
        // Set style property
        priority = typeof priority != 'undefined' ? priority : '';
        style.setProperty(styleName, value, priority);
        return this;
      } else {
        // Get style property
        return style.getPropertyValue(styleName);
      }
    } else {
      // Get CSSStyleDeclaration
      return style;
    }
  };
})(jQuery);

Voir https://developer.mozilla.org/en/DOM/CSSStyleDeclaration pour des exemples de la façon de lire et de définir le CSS valeurs. Mon problème était que j'avais déjà mis en !important de la largeur dans mon CSS pour éviter les conflits avec d'autres CSS du thème, mais toutes les modifications que j'ai apportées à la largeur de jQuery serait pas affectée, car ils pourraient être ajoutés à l'attribut style.

Compatibilité

Pour le réglage de la priorité à l'aide de l' setProperty de la fonction, http://help.dottoro.com/ljdpsdnb.php dit, il ya un soutien pour IE 9+, et tous les autres navigateurs. J'ai essayé avec IE 8 et il a échoué, c'est pourquoi j'ai construit un soutien pour elle dans mes fonctions (voir ci-dessus). Il fonctionne sur tous les autres navigateurs à l'aide de setProperty, mais il aura besoin de mon code personnalisé pour travailler dans < IE 9.

Answer 3

Vous pouvez définir la largeur directement à l'aide d' .width() comme ceci:

$("#elem").width(100);

Mise à jour pour les commentaires: Vous avez cette possibilité, mais il va remplacer tous les css sur l'élément, donc pas sûr que c'est plus viable:

$('#elem').css('cssText', 'width: 100px !important');

Answer 4

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

Answer 5

David Thomas réponse décrit la façon d'utiliser $('#elem').attr('style', …),, mais prévient qu'il vous permettra de supprimer préalablement définir des styles de l' style d'attribut. Voici une façon d'utiliser l' attr() sans problème:

var $elem = $('#elem');
$elem.attr('style', $elem.attr('style') + '; ' + 'width: 100px !important');

Comme une fonction:

function addStyleAttribute($element, styleAttribute) {
    $element.attr('style', $element.attr('style') + '; ' + styleAttribute);
}

addStyleAttribute($('#elem'), 'width: 100px !important');

Voici un JS Bin démo.