web-dev-qa-db-ja.com

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スタイルシートで指定されたスタイルのみを残す方法はありますか？

javascriptjquerycssinline
90
Matt

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

または

$('div').removeAttr('style');（From Andres's Answer ）から

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

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

Divにstyle属性があることを確認するため、これにより速度が少し速くなります。

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

158
Tyler Carter

プレーン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および上記。

28
Josh Crozier
$('div').removeAttr('style');
22
andres descalzo

要素のstyleを空にする必要がある場合：
element.style.cssText = null;
これはうまくいくはずです。それが役に立てば幸い！

3
Tushar Shukla

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

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

.removeAttrはIE8でトリックを実行することになりました。

3
rtvenge

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

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

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

  1. スタイル属性を削除します

element.removeAttribute('style');

1
JRulle