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 に style 属性があることを確認するため、これにより少し速度が向上するはずです。
いずれにせよ、大量の 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 以上 / .querySelectorAll()- IE 8 (部分的) IE9 以上。
$('div').removeAttr('style');
これは、次の 2 つの手順で実行できます。
1: タグ名、ID、クラスなどで変更したい要素を選択します。
var element = document.getElementsByTagName('h2')[0];
element.removeAttribute('style');
私はこの$('div').attr('style', '');手法を使用していましたが、IE8 では機能しませんでした。
を使用してスタイル属性を出力しましたが、alert()インライン スタイルが取り除かれませんでした。
.removeAttrIE8でトリックをやってしまいました。
CSS をスタイル シートに !important としてリストすることもできます。