JavaScriptを使用してすべてのインラインスタイルを消去し、CSSスタイルシートで指定されたスタイルのみを残すにはどうすればよいですか？

私のhtmlに以下がある場合：

<div style="height:300px; width:300px; background-color:#ffffff;"></div>

そして、これは私のCSSスタイルシートで：

div {
    width:100px;
    height:100px;
    background-color:#000000;
}

javascript / jqueryを使用して、インラインスタイルをすべて削除し、CSSスタイルシートで指定されたスタイルのみを残す方法はありますか？

$('div').attr('style', '');

または

$('div').removeAttr('style');（アンドレスの回答から）

これを少し小さくするには、これを試してください：

$('div[style]').removeAttr('style');

divにスタイル属性があることを確認するので、これは少しスピードアップするはずです。

どちらの方法でも、divが大量にある場合、処理に少し時間がかかる可能性があるため、javascript以外のメソッドを検討することをお勧めします。

プレーンJavaScript：

このような簡単なことをするのにjQueryは必要ありません。.removeAttribute()メソッドを使用するだけです。

単一の要素をターゲットにしていると仮定すると、以下を簡単に使用できます：（例）

document.querySelector('#target').removeAttribute('style');

複数の要素をターゲットにしている場合は、選択した要素のコレクションをループするだけです（例）。

var target = document.querySelectorAll('div');
Array.prototype.forEach.call(target, function(element){
    element.removeAttribute('style');
});

Array.prototype.forEach()-IE9以上/-IE .querySelectorAll()8（部分）IE9以上。

$('div').removeAttr('style');

私はこの$('div').attr('style', '');テクニックを使用していて、IE8では機能していませんでした。

を使用alert()してスタイル属性を出力しましたが、インラインスタイルが取り除かれていませんでした。

.removeAttr 結局、IE8でトリックを行うことになりました。

style要素のthe を空にするだけの場合：
element.style.cssText = null;
これで十分です。それが役に立てば幸い！

これは、次の2つのステップで実行できます。

1：タグ名、ID、クラスなどのいずれかで、変更する要素を選択します。

var element = document.getElementsByTagName('h2')[0];

2. スタイル属性を削除する

element.removeAttribute('style');

また、スタイルシートにCSSを！importantとしてリストすることもできます。