JavaScript を使用して CSS プロパティを削除するにはどうすればよいですか?

特定のタスクを実行した後、HTML 要素から CSS プロパティを削除する必要がある場合があります。たとえば、ユーザーはアプリのサブスクリプション料金を支払っていません。したがって、ヘッダー セクションに「支払い期限」メッセージが「赤色」で表示されます。ユーザーが支払いを完了した後、ヘッダーの内容を変更し、「color: red」属性を削除して初期色を設定できます。

HTML 要素から CSS プロパティを削除する必要がある使用例は数多くあります。ここでは、CSS プロパティを削除するさまざまな方法を学びます。

removeProperty() メソッドを使用する

最初のメソッドは、removeProperty() メソッドを使用します。これは、HTML 要素から CSS 属性を削除するために使用され、属性名をパラメーターとして受け取ります。

ユーザーは、次の構文に従って、removeProperty() メソッドを使用して HTML 要素から CSS プロパティを削除できます。

上記の構文では、「ele」は CSS 属性を削除する必要がある HTML 要素です。

以下の例では、「幅」、「高さ」、「境界線」、「背景色」などのさまざまな CSS プロパティを含む div 要素を作成しました。

ユーザーがボタンをクリックするたびに、removeColor() 関数が実行されます。 RemoveColor() 関数では、クラス名を使用して div 要素にアクセスします。その後、removeProeprty() メソッドを使用して、「background-color」をパラメータとして渡し、div 要素から背景色を削除します。

出力では、ユーザーがボタンをクリックすると、背景色が削除されることがわかります。

setProperty() メソッドを使用する

HTML 要素から CSS プロパティを削除する 2 番目の方法は、setProperty() メソッドを使用することです。 setProperty() メソッドは、HTML 要素の CSS プロパティを設定するために使用されますが、CSS プロパティに空の文字列を設定すると、要素から CSS プロパティを削除できます。

ユーザーは、setProperty() メソッドを使用して、次の構文に従って HTML 要素から CSS プロパティを削除できます。

上記の構文では、最初のパラメーターとしてプロパティ名を渡し、2 番目のパラメーターとして空の文字列を渡します。

以下の例では、最初の例と同様に、いくつかの CSS プロパティを含む div 要素を作成します。 RemoveBorder() 関数では、クラス名と setProperty() メソッドを使用して div 要素にアクセスし、境界線の空の文字列を設定します。

出力では、最初は緑色の境界線が確認できますが、ボタンをクリックすると境界線が削除されます。

「null」値を設定して CSS プロパティを削除します

HTML 要素から CSS プロパティを削除するもう 1 つの方法は、特定の CSS プロパティに null 値を設定することです。 JavaScript の setProperty() メソッドと JQuery の CSS() メソッドを使用して、特定の CSS プロパティに null 値を設定することもできます。ここでは、CSS プロパティに直接アクセスし、それに null 値を設定します。

ユーザーは、次の構文に従って CSS プロパティに null 値を設定することで、HTML 要素から CSS プロパティを削除できます。

上記の構文では、ユーザーは「element」と「css_property」をそれぞれ特定の HTML 要素と CSS プロパティ名に置き換える必要があります。

以下の例では、div 要素にテキストが含まれており、フォント サイズを 3rem に設定しています。 RemoveSize() 関数では、div 要素の「style」オブジェクトにアクセスし、style オブジェクトの「fontSize」プロパティを null に設定します。

出力では、ユーザーはボタンをクリックして div 要素テキストの初期フォント サイズを設定できます。

removeAttribute() メソッドを使用する

HTML 要素から CSS 属性を削除する 4 番目の方法は、removeAttribute() メソッドを使用することです。 JavaScript のremoveAttribute() メソッドは、JavaScript から特定の HTML 属性を削除するために使用されます。この例では、「style」属性を削除できます。これにより、HTML 要素からすべてのスタイルが削除されます。

ユーザーは、次の構文に従って、removeAttribute() メソッドを使用して HTML 要素から CSS 属性を削除できます。

上記の構文では、remvoeAttribute() メソッドのパラメータとして「style」を渡し、すべての CSS 属性を削除します。

以下の例では、テキストと複数の CSS プロパティを含む「

」要素から「style」属性を削除します。

HTML 要素から CSS プロパティを削除する 4 つの異なる方法を学びました。最初のメソッドでは、CSS プロパティを削除する最良の方法の 1 つである、removeProperty() メソッドを使用しました。 2 番目と 3 番目の方法は、CSS プロパティに null 値を設定する点ではほぼ似ていますが、HTML 要素から CSS プロパティは削除されません。

最後のメソッドでは、removeAttribute() メソッドを使用して「style」属性を削除しましたが、このメソッドは HTML 要素からすべてのスタイルを削除する必要がある場合にのみ使用してください。

上記のすべての方法は、インライン CSS プロパティを削除する場合にのみ機能します。

以上がJavaScript を使用して CSS プロパティを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。