[解決済み] Javascriptで特定のインラインスタイルを削除する|jQuery

質問

私の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; }

をすべて削除したい。 font-size と font-family の中に style 属性ではなく color などは外部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

どのように解決するのですか？

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