JavaScript のみを使用して DOM 内の要素の可視性を決定するにはどうすればよいですか?

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

質問:

を決定できますかjQuery に依存せずに要素が DOM 内で表示される場合は?具体的には、その可視性を確認するにはどの属性をチェックすればよいでしょうか?

答え:

MDN ドキュメントによると、要素またはその先祖のいずれかが存在する場合、要素の offsetParent プロパティは null を返します。表示スタイル プロパティによって非表示になります。ただし、これは要素が固定配置されていないことを前提としています。ページ上に位置: 固定要素が存在しない場合、可視性をチェックするための簡潔なスクリプトは次のとおりです。

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

ページ上に位置: 固定要素がある場合は、残念ながら window に頼らなければなりません。 .getComputedStyle() を使用して、パフォーマンスに影響を与える可能性がある徹底的なチェックを行います。

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

エッジ ケースの影響を受けやすいにもかかわらず、2 番目のオプションはより優れたパフォーマンスを提供します。明瞭さ。操作を繰り返し実行する場合は、window.getComputedStyle().

によるパフォーマンスの低下を回避するために、効率性を考慮して最初のオプションを検討してください。

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