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

StackOverflow https://stackoverflow.com/questions/1229688

  •  22-07-2019
  •  | 
  •  

質問

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

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

alert（）を使用してスタイル属性を出力しましたが、インラインスタイルを削除していませんでした。

.removeAttr は、IE8でトリックを実行しました。

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

これは次の2つの手順で実現できます。

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

var element = document.getElementsByTagName（ 'h2'）[0];

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

element.removeAttribute（ 'style'）;

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top