刪除的JavaScript特定的內聯樣式| jQuery的

Question

我在我的HTML下面的代碼：

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

，並在我的外部CSS：

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

我想刪除所有「字體 - 尺寸「和」字體家族「的」風格「屬性，但不是」顏色「和其他設置在外部CSS。

結果預計：

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

已經嘗試過：

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

Answer 1

對於那些不使用jQuery的人，可以使用本機removeProperty方法從內聯樣式中刪除特定樣式。例如：

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

當然，IE < 9不支持這個，所以你將不得不使用

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

這樣一個跨瀏覽器的方式做到這將是：

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

Answer 2

我覺得這是對這個問題沒有妥善解決（不改變你的標記）。你可以搜索並替換樣式屬性的值：

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

到目前爲止，最好的解決辦法是擺脫內嵌樣式和使用類管理風格。

Answer 3

我的建議是遠離使用內聯樣式設置這些東西。我會建議使用類，然後使用jQuery在它們之間進行切換：

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

設定的屬性inherit ：

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

Answer 5

從我所看到的你真的需要兩種不同的款式。這可能是更容易在CSS中設置這些了，然後就使用jQuery刪除/添加你需要：

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

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

您最初的HTML看起來像：

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

然後恢復到styleTwo在jQuery中

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