Comment appliquer! Important en utilisant .css ()?
Je ne parviens pas à appliquer un style !important. J'ai essayé:
$("#elem").css("width", "100px !important");
Cela fait rien; aucun style de largeur n'est appliqué. Existe-t-il une méthode jQuery-ish d'appliquer un tel style sans avoir à écraser cssText (ce qui signifierait que je devrais d'abord l'analyser, etc.)?
Edit: J'ajouterais que j'ai une feuille de style avec un style !important que j'essaie de remplacer par un style !important intégré, donc j'utilise .width() et le like ne fonctionne pas car il est remplacé par mon style externe !important.
En outre, la valeur qui remplacera la valeur précédente est calculée, je ne peux donc pas simplement créer un autre style externe.
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') comme pour .css('name'), obtenir CSSStyleDeclaration avec .style() et définir des valeurs - avec la possibilité de spécifier la priorité comme étant 'importante'. Voir this .
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 this pour des exemples sur la lecture et la définition des valeurs CSS. Mon problème était que j'avais déjà défini !important pour la largeur dans mon CSS afin d'éviter les conflits avec d'autres CSS de thème, mais toute modification apportée à la largeur dans jQuery ne serait pas affectée car elle serait ajoutée à l'attribut style.
Compatibilité
Pour régler avec la priorité à l'aide de la fonction setProperty, Cet article indique que IE 9+ et tous les autres navigateurs sont pris en charge. J'ai essayé avec IE 8 et cela a échoué. C'est pourquoi j'ai construit le support dans mes fonctions (voir ci-dessus). Cela fonctionnera sur tous les autres navigateurs utilisant setProperty, mais il faudra que mon code personnalisé fonctionne dans <IE 9.
Le problème est dû au fait que jQuery ne comprend pas l'attribut !important et qu'il ne parvient pas à appliquer la règle.
Vous pourrez 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');
Cette dernière approche annulerait toutefois les règles de style en ligne précédemment définies. Alors utilisez avec précaution.
Bien sûr, il y a un bon argument selon lequel la méthode de @Nick Craver est plus simple/plus sage.
L'approche ci-dessus, attr() légèrement modifiée pour conserver l'original style chaîne/propriétés:
$('#elem').attr('style', function(i,s) { return s + 'width: 100px !important;' });
Vous pouvez définir la largeur directement en utilisant .width() comme ceci:
$("#elem").width(100);
Mis à jour pour les commentaires: Vous avez aussi cette option, mais elle remplacera tous les CSS de l'élément, donc vous n'êtes pas sûr que ce soit plus viable:
$('#elem').css('cssText', 'width: 100px !important');
var elem = $("#elem");
elem[0].style.removeAttribute('width');
elem[0].style.setProperty('width', '100px', 'important');
La réponse de David Thomas décrit une façon d’utiliser $('#elem').attr('style', …), mais avertit que son utilisation supprimera les styles précédemment définis dans l’attribut style. 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 un démo de JS Bin .
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.
Tu peux le faire:
$("#elem").css("cssText", "width: 100px !important;");
Utiliser "cssText" comme nom de propriété et tout ce que vous voulez ajouter au CSS comme valeur.
Vous pouvez y parvenir de deux manières:
$("#elem").prop("style", "width: 100px !important"); // this is not supported in chrome
$("#elem").attr("style", "width: 100px !important");
Inutile de parler de la complexité de la réponse de @ AramKocharyan, ni de la nécessité d'insérer des balises de style de manière dynamique.
Écrasez simplement le style, mais vous n'avez rien à analyser, pourquoi voudriez-vous?
// 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' : '') + ';');
}
Impossible d'utiliser removeProperty(), car il ne supprimera pas les règles !important dans Chrome.
Impossible d'utiliser element.style[property] = '', car il n'accepte que camelCase dans Firefox.
Vous pourriez probablement raccourcir ce temps avec jQuery, mais cette fonction Vanilla sera exécutée sur les navigateurs modernes, Internet Explorer 8, etc.
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');
Si ce n'est pas si pertinent et que vous avez affaire à un élément qui est #elem, vous pouvez changer son identifiant et lui attribuer un autre style et le personnaliser à votre guise ...
$('#elem').attr('id', 'cheaterId');
Et dans votre CSS:
#cheaterId { width: 100px;}
Cette solution ne remplace aucun des styles précédents, elle applique simplement celui 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);
}
Au lieu d'utiliser la fonction css(), essayez la fonction addClass():
<script>
$(document).ready(function() {
$("#example").addClass("exampleClass");
});
</script>
<style>
.exampleClass{
width:100% !important;
height:100% !important;
}
</style>
La solution la plus simple et la meilleure pour résoudre ce problème de ma part consistait simplement à utiliser addClass () au lieu de .css () ou .attr ().
Par exemple:
$('#elem').addClass('importantClass');
Et dans votre fichier CSS:
.importantClass {
width: 100px !important;
}
Pour votre information, cela ne fonctionne pas car jQuery ne le supporte pas. Un ticket a été déposé en 2012 ( # 11173 $ (elem) .css ("property", "value! Important") échoue ) qui a finalement été fermé sous le nom WONTFIX.
Peut-être qu'il ressemble à ceci:
Cache
var noeud = $ ('. sélecteur') [0];
OU
var noeud = document.querySelector ('. sélecteur');
Définir CSS
node.style.setProperty ('width', '100px', 'important');Supprimer le CSS
node.style.removeProperty ('width');
OU
node.style.width = '';Nous devons d'abord supprimer le style précédent. Je l'enlève en utilisant une expression régulière. Voici un exemple de changement de couleur:
var SetCssColorImportant = function (jDom, color) {
var style = jDom.attr('style');
style = style.replace(/color: .* !important;/g, '');
jDom.css('cssText', 'color: ' + color + ' !important;' + style); }
Une autre façon d’ajouter du style en tête:
$('head').append('<style> #Elm{width:150px !important} </style>');
Cela ajoute un style après tous vos fichiers CSS. Il aura donc une priorité plus élevée que les autres fichiers CSS et sera appliqué.
Je pense que cela fonctionne bien et peut écraser tout autre CSS avant (this: élément DOM):
this.setAttribute('style', 'padding:2px !important');
Cette solution laissera tout le javascript calculé et ajoutera la balise importante dans l'élément: vous pouvez le faire (Ex si vous devez définir la largeur avec la balise importante)
$('exampleDiv').css('width', '');
//This will remove the width of the item
var styles = $('exampleDiv').attr('style');
//This will contain all styles in your item
//ex: height:auto; display:block;
styles += 'width: 200px !important;'
//This will add the width to the previous styles
//ex: height:auto; display:block; width: 200px !important;
$('exampleDiv').attr('style', styles);
//This will add all previous styles to your item
Fais-le comme ça:
$("#elem").get(0).style.width= "100px!important";
Trois exemples de travail
J'avais une situation similaire, mais j'ai utilisé .find () après avoir longtemps lutté avec .closest () avec de nombreuses variantes.
Le code d'exemple
// Allows contain functions to work, ignores case sensitivity
jQuery.expr[':'].contains = function(obj, index, meta, stack) {
result = false;
theList = meta[3].split("','");
var contents = (obj.textContent || obj.innerText || jQuery(obj).text() || '')
for (x=0; x<theList.length; x++) {
if (contents.toLowerCase().indexOf(theList[x].toLowerCase()) >= 0) {
return true;
}
}
return false;
};
$(document).ready(function() {
var refreshId = setInterval( function() {
$("#out:contains('foo', 'test456')").find(".inner").css('width', '50px', 'important');
}, 1000); // Rescans every 1000 ms
});
Alternative
$('.inner').each(function () {
this.style.setProperty('height', '50px', 'important');
});
$('#out').find('.inner').css({ 'height': '50px'});
Fonctionne: http://jsfiddle.net/fx4mbp6c/
Je suppose que vous avez essayé sans ajouter !important?
CSS en ligne (c'est comment JavaScript ajoute le style) remplace la feuille de style CSS. Je suis presque sûr que c'est le cas même lorsque la règle CSS de la feuille de style a !important.
Une autre question (peut-être une question stupide mais qui doit être posée.): L’élément sur lequel vous essayez de travailler est-il display:block; ou display:inline-block;?
Ne connaissant pas votre expertise en CSS ... les éléments en ligne ne se comportent pas toujours comme prévu.
Nous pouvons utiliser setProperty ou cssText pour ajouter !important à un élément DOM à l'aide de JavaScript.
Exemple 1:
elem.style.setProperty ("color", "green", "important");
Exemple 2:
elem.style.cssText='color: red !important;'
Cela peut ne pas convenir à votre situation, mais vous pouvez utiliser des sélecteurs CSS pour beaucoup de ce type de situations.
Si, par exemple, vous vouliez que les 3ème et 6ème instances de .cssText aient une largeur différente, vous pouvez écrire:
.cssText:nth-of-type(3), .cssText:nth-of-type(6) {width:100px !important;}
Ou:
.container:nth-of-type(3).cssText, .container:nth-of-type(6).cssText {width:100px !important;}
La solution de contournement la plus sûre consiste à ajouter une classe, puis à faire de la magie en CSS :-), addClass() et removeClass() devraient faire le travail.
J'ai eu le même problème en essayant de changer la couleur du texte d'un élément de menu lorsque "événement". Le meilleur moyen que j'ai trouvé quand j'ai eu ce même problème était:
Première étape: Créez dans votre CSS une nouvelle classe dans ce but, par exemple:
.colorw{ color: white !important;}
Dernière étape: appliquez cette classe à l'aide de la méthode addClass comme suit:
$('.menu-item>a').addClass('colorw');
Problème résolu.
J'ai aussi découvert que certains éléments ou add-ons (comme Bootstrap) ont des cas particuliers de classe où ils ne fonctionnent pas bien avec !important ou d'autres solutions telles que .addClass/.removeClass, et vous devez donc basculer les allumer/éteindre.
Par exemple, si vous utilisez quelque chose comme <table class="table-hover">, le seul moyen de modifier des éléments tels que les couleurs de lignes consiste à activer/désactiver la classe table-hover, comme ceci
$(your_element).closest("table").toggleClass("table-hover");
Espérons que cette solution sera utile à quelqu'un! :)
https://jsfiddle.net/xk6Ut/256/
Une autre approche consiste à créer et à mettre à jour de manière dynamique une classe CSS en JavaScript. Pour ce faire, nous pouvons utiliser l'élément de style et nous devons utiliser l'ID pour l'élément de style afin de pouvoir mettre à jour la classe CSS.
function writeStyles(styleName, cssText) {
var styleElement = document.getElementById(styleName);
if (styleElement) document.getElementsByTagName('head')[0].removeChild(
styleElement);
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = styleName;
styleElement.innerHTML = cssText;
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
...
var cssText = '.testDIV{ height:' + height + 'px !important; }';
writeStyles('styles_js', cssText)