Supprimer un style en ligne spécifique avec Javascript|jQuery

Question

J'ai le code suivant dans mon html :

 <p id='foo' style='text-align:center; font-size:14pt; font-family:verdana; color:red'>hello world</p>

et que dans mon css externe :

 #foo{ font-size:11pt; font-family:arial; color:#000; }

Je souhaite supprimer tous les font-size et font-family dans l' style , mais pas les color et autres définis dans un css externe.

Résultat attendu :

 <p id='foo' style='text-align:center; color:red'>hello world</p>

Déjà essayé:

 $('#foo').removeAttr('style');   // That removes all inline
$('#foo').css('font-family',''); // That remove the css setted too

Answer 1

Pour ceux qui n'utilisent pas jQuery, vous pouvez supprimer des styles spécifiques des styles en ligne à l'aide de la méthode native removeProperty. Exemple:

 elem.style.removeProperty('font-family');

Bien sûr, IE < 9 ne prend pas en charge cela, vous devrez donc utiliser

 elem.style.removeAttribute('font-family');

donc une manière multi-navigateur de le faire serait:

 if (elem.style.removeProperty) {
    elem.style.removeProperty('font-family');
} else {
    elem.style.removeAttribute('font-family');
}

Answer 2

Définissez les propriétés sur inherit :

 $('#foo').css('font-family','inherit').css('font-size','inherit');

Answer 3

En 2019, la façon la plus simple de supprimer une propriété semble être :

 elem.style.border = "";

De même, pour définir une bordure :

 elem.style.outline = "1px solid blue";

Devrait également fonctionner sur tous les navigateurs !

Answer 4

Je pense qu'il n'y a pas de solution appropriée à ce problème (sans changer votre balisage). Vous pouvez rechercher et remplacer la valeur de l'attribut style :

 var element = $('#foo');
element.attr('style', element.attr('style').replace(/font-size:[^;]+/g, '').replace(/font-family:[^;]+/g, ''))

De loin, la meilleure solution serait de se débarrasser des styles en ligne et de gérer les styles en utilisant des classes.

Answer 5

Ma suggestion serait de ne pas définir ce genre de choses en utilisant des styles en ligne. Je suggérerais d'utiliser des classes, puis d'utiliser jQuery pour basculer entre elles :

CSS :

 #foo{ font-size:11pt; font-family:arial; color:#000; }
#foo.highlight {text-align:center; font-size:14pt; font-family:verdana; color:red}

HTML :

 <p id="foo" class="highlight">hello world</p>

Javascript :

 $('#foo').removeClass('highlight');
$('#foo').addClass('highlight');