JavaScript で要素の可視性を効率的に判断するにはどうすればよいですか?

純粋な JavaScript を使用した DOM 内の要素の可視性の決定

DOM 内で要素が可視であるかどうかを識別することは、多くの場合、さまざまな Web 開発タスクにとって不可欠です。 。 jQuery はシンプルなソリューションを提供しますが、この記事では純粋な JavaScript アプローチを検討します。

要素属性のチェック

この質問では、表示や可視性などの属性をチェックして可視性を判断することを提案しています。ただし、これらの属性だけでは十分ではない可能性があります。

要素オフセットの活用

MDN ドキュメントによると、要素またはその祖先が次の場合、要素の offsetParent プロパティは null を返します。表示プロパティによって非表示になります。このアプローチは、位置が固定された要素がない場合に適しています。

function isHidden(el) {
    return (el.offsetParent === null);
}

固定要素のウィンドウ スタイル

位置が固定された要素が存在する場合は、 window.getComputedStyle().

function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none');
}

パフォーマンスを使用するために必要です考慮事項

window.getComputedStyle() を使用したオプション 2 はより包括的ですが、速度が低下する可能性があります。この操作が頻繁に繰り返される場合は、パフォーマンスを最適化するためにオフセット アプローチの使用を検討してください。

以上がJavaScript で要素の可視性を効率的に判断するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。