Entfernen eines bestimmten Inline-Stil mit Javascript | jQuery

Question

Ich habe den folgenden Code in meinem html:

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

und dass in meinem externen CSS:

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

Ich möchte alle entfernen „font- Größe "und" Schriftart-Familie "in der" Stil "-Attribut, aber nicht die" Farbe "und andere in externen CSS eingestellt.

Ergebnis erwartet:

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

bereits versucht:

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

Answer 1

Für jene, die nicht mit jQuery sind, können Sie bestimmte Arten von dem Inline-Styles mit der nativen removeProperty Methode löschen.Beispiel:

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

Natürlich IE < 9 dies nicht unterstützt, so werden Sie

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

so ein Cross-Browser nutzen zu tun haben, wäre es:

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

Answer 2

Ich denke, es keine richtige Lösung für dieses Problem ist (ohne Markup zu ändern). Sie könnten suchen und das Wert des style-Attributs ersetzen:

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

Bei weitem die beste Lösung wäre, das Inline-Styles loszuwerden und die Stile verwalten von Klassen.

Answer 3

Mein Vorschlag wäre es, dieses Zeug nicht mit Inline-Stilen zu setzen. Ich würde vorschlagen, Klassen und dann mit jQuery zwischen ihnen zu wechseln:

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

Answer 4

Legen Sie die Eigenschaften auf inherit :

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

Answer 5

Von dem, was ich sehen kann, brauchen Sie wirklich zwei verschiedene Stile für den Absatz. Es könnte einfacher sein, die in CSS einzurichten und dann nur mit jQuery entfernen/hinzufügen, wie Sie benötigen:

#styleOne { color: red; font: normal 14pt Verdana; text-align: center; } 

#styleTwo{ color: #000; font: normal 11pt Arial; text-align: center; } 

Ihre erste html wird wie folgt aussehen:

<p id="styleOne">hello world</p> 

Und dann zu styleTwo zurückkehren in

jQuery

$('p#styleOne').removeClass('styleOne').addClass('styleTwo');