CSS での display:none の使用に関するメモの共有

display:none スタイルは、Web ページのフロントエンドをコーディングするときによく使用されます。

1 の要素を非表示にするために、display:none を直接使用する場合、注意が必要な機能がいくつかあります。スタイル ファイルまたはページ ファイルのコードをロードします。ページを開いた後、js でスタイルを設定して要素を表示しないと、js コードを使用すると要素の一部の属性 (offSetTop、offSetLeft など) を正しく取得できません。これらの値は要素が表示された後にのみ正しく取得できます。js を通じて style.display を設定します。

2. display:none を使用して非表示にした要素は、Baidu などの検索サイトでは取得されません。これは Web サイトの SEO に影響します。場合によっては、left:-100000px を使用して同じ効果を得ることができます。

3. スタイル ファイルまたは を通じて要素の display:none スタイルを設定する場合、js で style.display="" を設定しても要素は表示されません。またはインラインなどの値を代わりに使用します。 style="display:none" を介して要素を直接設定すると、この問題は発生しません

4. 場合によっては、style.display の代わりに style.visibility を使用できますが、style.visibility は、要素が占めるページ上のスペースを保持しますが、style.display は要素を非表示にし、ページが占めるスペースを放棄します。

以上がCSS での display:none の使用に関するメモの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。