Usuń specyficzny styl inline JavaScript | jQuery

Question

Mam następujący kod w moim HTML:

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

i że w moim css zewnętrznej:

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

Chcę usunąć wszystkie „fontu size "i" font-family "w atrybucie" style ", ale nie" kolor "i inne ustawione w zewnętrznych css.

Rezultat spodziewanych:

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

Już próbowałem:

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

Answer 1

Dla tych, które nie są przy użyciu jQuery, można usunąć konkretne style od stylów inline przy użyciu rodzimych metodę removeProperty.Przykład:

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

Oczywiście, IE < 9 nie obsługuje tej funkcji, więc będziesz musiał użyć

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

więc krzyż sposób przeglądarka zrobić byłoby:

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

Answer 2

myślę, że nie ma właściwego rozwiązania tego problemu (bez zmiany znaczników). Można wyszukiwać i zastępować wartość atrybutu style w:

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

Zdecydowanie najlepszym rozwiązaniem byłoby, aby pozbyć się stylów inline style i zarządzać za pomocą klas.

Answer 3

Moja sugestia to trzymanie się z dala od ustawiania tych rzeczy przy użyciu stylów wbudowanych. Proponuję za pomocą klas, a następnie przy użyciu jQuery, aby przełączać się między nimi:

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

Ustaw właściwości do inherit :

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

Answer 5

Z tego, co widzę, naprawdę potrzebujesz dwóch różnych stylów akapitu. To może być łatwiej ustawić te w CSS, a następnie po prostu użyć jQuery aby usunąć/dodać, jak trzeba:

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

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

Początkowej html będzie wyglądać następująco:

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

A potem powrócić do styleTwo w jQuery

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