Question Comment appliquer! Important en utilisant .css ()?


J'ai du mal à appliquer un style qui est !important. J'ai essayé:

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

Cela fait rien; aucun style de largeur n'est appliqué. Existe-t-il une façon jouteuse d'appliquer un tel style sans avoir à écraser cssText (ce qui voudrait dire que je devrais l'analyser en premier, etc.)?

modifier: Je devrais ajouter que j'ai une feuille de style avec un !important le style que je suis en train de remplacer avec un !important style en ligne, donc en utilisant .width() et semblable ne fonctionne pas car il est remplacé par mon externe !important style.

En outre, la valeur qui remplacera la valeur précédente est calculé, donc je ne peux pas simplement créer un autre style externe.


631
2018-04-16 20:31


origine


Réponses:


Je pense avoir trouvé une vraie solution. Je l'ai fait dans une nouvelle fonction:

jQuery.style(name, value, priority);

Vous pouvez l'utiliser pour obtenir des valeurs avec .style('name') juste comme .css('name'), obtenez le CSSStyleDeclaration avec .style(), et également définir des valeurs - avec la possibilité de spécifier la priorité comme «important». Voir ce.

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 la sortie:

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 ce pour des exemples de lecture et de définition des valeurs CSS. Mon problème était que j'avais déjà défini !important pour la largeur dans mon CSS pour éviter les conflits avec d'autres CSS de thème, mais toutes les modifications que j'ai apportées à la largeur dans jQuery ne seraient pas affectées puisqu'elles seraient ajoutées à l'attribut de style.

Compatibilité

Pour le réglage avec la priorité en utilisant le setProperty fonction, Cet article dit qu'il existe un support pour IE 9+ et tous les autres navigateurs. J'ai essayé avec IE 8 et il a échoué, c'est pourquoi j'ai construit le support pour cela dans mes fonctions (voir ci-dessus). Il fonctionnera sur tous les autres navigateurs utilisant setProperty, mais il aura besoin de mon code personnalisé pour fonctionner dans <IE 9.


296
2018-01-17 12:23



Le problème est causé par jQuery ne comprenant pas le !important attribut, et en tant que tel ne parvient pas à appliquer la règle.

Vous pouvez peut-être contourner ce problème et appliquer la règle en y faisant référence via addClass():

.importantRule { width: 100px !important; }

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

Ou en utilisant attr():

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

Cependant, cette dernière approche supprimerait toutes les règles de style en ligne précédemment définies. Donc, utilisez avec soin.

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

Ce qui précède, attr() approche modifiée légèrement pour préserver l'original style chaîne / propriétés:

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

526
2018-04-16 20:40



Vous pouvez définir la largeur directement en utilisant .width() comme ça:

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

Mis à jour pour commentaires: Vous avez également cette option, mais elle remplacera tout le CSS sur l'élément, donc pas sûr que ce soit plus viable:

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

136
2018-04-16 20:32



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

63
2017-09-13 18:18



La réponse de David Thomas décrit un moyen d'utiliser $('#elem').attr('style', …), mais avertit que son utilisation supprimera les styles précédemment définis dans le style attribut. Voici une façon d'utiliser attr() sans ce problème:

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

En tant que fonction:

function addStyleAttribute($element, styleAttribute) {
    $element.attr('style', $element.attr('style') + '; ' + styleAttribute);
}
addStyleAttribute($('#elem'), 'width: 100px !important');

Voici une JS Bin démo.


51
2017-07-30 14:24



Après avoir lu d'autres réponses et expérimenté, voici ce qui fonctionne pour moi:

$(".selector")[0].style.setProperty( 'style', 'value', 'important' );

Cela ne fonctionne pas dans IE 8 et moins, cependant.


27
2017-08-02 23:33



Tu peux le faire:

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

En utilisant "cssText" comme nom de la propriété et tout ce que vous voulez ajouter au CSS comme valeur.


22
2017-09-13 01:20



Vous pouvez y parvenir de deux façons:

$("#elem").prop("style", "width: 100px !important"); // this is not supported in chrome
$("#elem").attr("style", "width: 100px !important");

17
2017-07-09 11:13



Il n'est pas nécessaire d'aller à la complexité de la réponse de @ AramKocharyan, ni à la nécessité d'insérer dynamiquement des balises de style.

Il suffit d'écraser le style, mais tu n'as rien à analyser, pourquoi le ferais-tu?

// Accepts the hyphenated versions (i.e. not 'cssFloat')
function addStyle(element, property, value, important) {
    // Remove previously defined property
    if (element.style.setProperty)
        element.style.setProperty(property, '');
    else
        element.style.setAttribute(property, '');

    // Insert the new style with all the old rules
    element.setAttribute('style', element.style.cssText +
        property + ':' + value + ((important) ? ' !important' : '') + ';');
}

Ne peut pas utiliser removeProperty(), parce qu'il ne va pas enlever !important règles dans Chrome.
Ne peut pas utiliser element.style[property] = '', car il n'accepte que camelCase dans Firefox.

Vous pourriez probablement rendre cela plus court avec jQuery, mais cette fonction vanille fonctionnera sur les navigateurs modernes, Internet Explorer 8, etc.


14
2017-10-04 00:56



Voici ce que j'ai fait après avoir rencontré ce problème ...

var origStyleContent = jQuery('#logo-example').attr('style');
jQuery('#logo-example').attr('style', origStyleContent + ';width:150px !important');

12
2018-05-15 08:54



Cette solution ne remplace aucun des styles précédents, elle applique simplement celle dont vous avez besoin:

var heightStyle = "height: 500px !important";
if ($("foo").attr('style')) {
  $("foo").attr('style', heightStyle + $("foo").attr('style').replace(/^height: [-,!,0-9,a-z, A-Z, ]*;/,''));
else {
  $("foo").attr('style', heightStyle);
}

9
2017-10-08 17:12