6

これを行うにはいくつかの方法があります（私が知っていることです）。

CSS表示のテスト

if ($('#foo').css('display') == 'none')

可視性をテストする

if ($('#foo').is(':visible'))

可視性では、要素が存在するかどうかを確認できます。

ドキュメント内のスペースを消費する場合、要素は可視と見なされます。可視要素の幅または高さが 0 より大きい。

可視性: 非表示または不透明度: 0 の要素は、レイアウト内のスペースを消費するため、可視と見なされます。

ソース

ただし、両方で (ユーザーによる) 可視性をテストできないことに注意してください。

要素を非表示にするには、display プロパティを「none」に設定するか、visibility プロパティを「hidden」に設定します。ただし、これら 2 つの方法では結果が異なることに注意してください。

可視性: hidden は要素を非表示にしますが、以前と同じスペースを占有します。要素は非表示になりますが、レイアウトには影響します。

display: none は要素を非表示にし、スペースを占有しません。要素は非表示になり、要素が存在しないかのようにページが表示されます。

ソース

そのため、どちらの例でも、要素がユーザーにとってあらゆる意味で見えるかどうかをテストしていません。

だから私の質問は：

  • 上記の 2 つの if のコードの違いは何ですか?
  • 要素がユーザーに表示されるかどうかをテストする最良の方法は何ですか:

次のようなものを使用する必要がありますか？

if ($('#foo').is(':visible') && 
    $('#foo').css('opacity') > 0 && 
    $('#foo').css('visibility') != 'hidden')
4

3 に答える 3

2

あなたの最善の策は、以下のようなカスタム関数を実装し、新しいものが登場するたびにテスト/改善することだと思います.

$.fn.isReallyVisible = function () { //rename function name as you like..
    return (this.css('display') != 'none' &&
            this.css('visibility') != 'hidden' &&
            this.css('opacity') > 0);
}

上記は、jQuery.css関数 (特に不透明度) を使用しているため、クロス ブラウザーの証明である必要があります。

デモ

于 2012-05-14T21:20:21.997 に答える
0

DOM に要素が存在するかどうかを確認したい場合は、次のようにします。

$.fn.exists = function () {
    return this.length > 0;
}

使用法：

$('#myid').exists();
于 2012-05-14T20:27:58.857 に答える
0

この 2 つの違いは、"visible" 属性を使用して非表示にすると、実際には表示されずに要素がページに残ることです。そのため、ページがディスプレイの残りの部分をレンダリングするときに、その間隔が考慮されます。

他の方法で行うと、実際には要素がページに配置されなくなり、ページ上の他の要素のレイアウトが変更される可能性があります。

通常、私の経験からは、表示されている部分をテストするだけで十分ですが、より完全にしたい場合は、複数の属性で「&&」条件を使用して確認する必要があります。それは実際には、使用しているコードがどれだけクリーンであるか、およびシステムの残りの UI 側面がどれだけ適切にテストされているかにかかっています。

考慮すべきもう1つのことは、テストの目的は何かです。あなたが書いたコードをテストしていますか、それともブラウザーが Javascript を使用してページをレンダリングする方法をテストしていますか? 作成しているコードをテストし、ブラウザーが機能するという事実に依存したい (ブラウザーが機能しなくなったら、とにかく全体が信頼できないため)。したがって、コードで要素に何らかの属性を設定するように指示する場合、その属性をチェックするだけで、必要なテストはすべて完了します。その上にあるものは、コード自体の外部でテストすることによってのみ実際に証明できます (手動でページを確認するなど)。

于 2012-05-14T19:43:21.267 に答える