jsでCSSの表示を変更する方法

Web 開発のプロセスでは、JavaScript を使用してスタイルを変更する必要があることがよくあります。頻繁に使用されるシナリオの 1 つは、要素の可視性を変更することです。 CSS では、display 属性を使用して要素の表示/非表示を制御できます。 JavaScript では、DOM を使用して要素のスタイルにアクセスして変更し、要素の表示/非表示を制御できます。

1. 表示属性

表示属性は、ドキュメント内での要素の表示方法を制御するために使用されます。その値は次のとおりです。

1. none: 要素はレンダリングされません。つまり、ドキュメントに表示されません。
2. block: 要素はブロックレベルの要素としてレンダリングされます。つまり、要素は行全体を占めます。
3. inline: 要素はインライン要素としてレンダリングされます。つまり、要素は行全体を占有せず、1 行内に表示されます。
4. inline-block: 要素はインライン ブロック レベルの要素としてレンダリングされます。つまり、要素は 1 行で表示され、幅、高さ、境界線、その他のスタイルを設定できます。
5. table、table-row、table-cell: 要素はテーブル関連の要素として表示されます。 table は要素をテーブルとしてレンダリングし、table-row は要素をテーブルの行としてレンダリングし、table-cell は要素をテーブルのセルとしてレンダリングします。
6. flex、inline-flex: 要素はフレックス コンテナとしてレンダリングされ、レスポンシブ レイアウトやその他のシナリオの実装に使用できます。

2. JavaScript 操作の表示属性

JavaScript では、DOM を通じて要素の表示属性を取得および変更できます。まず、ドキュメント オブジェクトの getElementById() メソッドを通じて、操作する必要がある要素を取得する必要があります。このメソッドは、取得する必要がある要素 ID を渡す必要があります。例:

var myDiv = document.getElementById('myDiv');

上記のコードは、ID「myDiv」を持つ要素を取得し、それを変数 myDiv に割り当てます。次に、style 属性を通じて要素の style 属性にアクセスできます。たとえば、次のコードを使用して要素の表示属性を none に設定すると、要素がページに表示されなくなります。

myDiv.style.display = 'none';

要素の表示属性を判断して、要素を表示または非表示にすることもできます。たとえば、次のコードでは、要素が元々非表示の場合、表示属性を block に設定することで要素を表示できます。

if (myDiv.style.display === 'none') {
  myDiv.style.display = 'block';
}

要素が元々表示されている場合は、その表示属性を none に設定できるため、Hidden になります。要素:

if (myDiv.style.display !== 'none') {
  myDiv.style.display = 'none';
}

3. アプリケーション シナリオ

1. ポップアップ レイヤーの表示と非表示

Web 開発では、多くの場合、ポップアップ レイヤーを使用する必要があります。レイヤーを上に上げると、より多くの情報が表示され、より多くのコンテンツやインタラクティブ性が表示されます。ポップアップ レイヤーは通常、ユーザーがボタンまたはリンクをクリックしたときにトリガーされ、ユーザーが「閉じる」ボタンをクリックしたときに閉じる必要があります。この機能を実現するには、JavaScript を使用してポップアップ レイヤーの表示属性を変更します。ポップアップ レイヤーの初期状態では、その表示属性を none に設定できます。これは、ポップアップ レイヤーがページに表示されないことを意味します。ユーザーがポップアップ レイヤーをトリガーするボタンまたはリンクをクリックすると、ポップアップ レイヤーの表示属性をブロックに設定してポップアップ レイヤーを表示できます。ユーザーがポップアップ レイヤーの [閉じる] ボタンをクリックすると、ポップアップ レイヤーの表示プロパティを none に設定してポップアップ レイヤーを閉じることができます。

2. レスポンシブ レイアウトの実装

レスポンシブ レイアウトとは、さまざまな表示画面サイズに合わせてレイアウトとスタイルを調整することにより、さまざまなデバイスの表示画面サイズを指します。レスポンシブ レイアウトを実装する場合、通常、画面サイズに応じて表示モードと特定の要素の位置を調整する必要があります。このうち、display 属性を使用して要素の表示モードを制御し、レスポンシブなレイアウトを実現できます。たとえば、一般的なナビゲーション バーでは、画面幅が特定のしきい値より小さい場合はナビゲーション バーの項目を横に並べて表示し、画面幅がそのしきい値より大きい場合は縦に並べて表示したいとします。このレスポンシブなレイアウトは、ナビゲーション バーの各項目の表示属性を変更することで実現できます。

3. ユーザーの動作に基づいて要素の表示を制御する

シナリオによっては、ユーザーの動作に基づいて要素の表示を制御したい場合があります。たとえば、ユーザーが検索ボックスにキーワードを入力したときに、検索結果列を表示したいとします。このとき、検索ボックスの入力イベントを監視し、ユーザーがキーワードを入力した際に、検索結果列の表示属性をブロックに設定して検索結果を表示することができます。ユーザーがキーワードをクリアした場合、検索結果列の表示属性を none に設定することで、検索結果を非表示にすることができます。

4. 概要

要素の表示属性を変更することで、要素の可視性を制御し、さまざまな Web 開発シナリオを実装できます。これらのシナリオを実装するときは、JavaScript を通じて要素のスタイル属性を取得および変更する必要があります。このテクノロジーをマスターすると、Web 開発のさまざまなタスクをより効率的に完了できるようになります。

以上がjsでCSSの表示を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。