要素が表示されているかどうかを検出する jQuery メソッド-jsチュートリアル-php.cn

要素が表示されているかどうかを検出する jQuery メソッド

WBOY

リリース： 2024-02-23 21:03:32

オリジナル

952 人が閲覧しました

要素が表示されているかどうかを検出する jQuery メソッド

jQuery を使用して要素の表示状態を確認する方法

Web 開発では、対応する操作を実行するために要素が表示されているかどうかを確認する必要がある場合があります。。この機能はjQueryを使えば簡単に実現できます。この記事では、jQuery を使用して要素の表示状態を判断する方法を詳しく紹介し、具体的なコード例を添付します。

1. jQuery の :visible セレクターを使用する

jQuery は、すべての表示要素を選択するために使用できる :visible セレクターを提供します。このセレクターを通じて、要素が表示されるかどうかを判断できます。以下は簡単な例です:

<!DOCTYPE html>
<html>
<head>
  <title>判断元素的可见状态</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="element1" style="display: none;">元素1</div>
  <div id="element2" style="display: block;">元素2</div>

  <script>
    if ($('#element1').is(':visible')) {
      console.log('元素1可见');
    } else {
      console.log('元素1不可见');
    }

    if ($('#element2').is(':visible')) {
      console.log('元素2可见');
    } else {
      console.log('元素2不可见');
    }
  </script>
</body>
</html>

ログイン後にコピー

この例では、ID が element1 と element2 である 2 つの要素がそれぞれ表示されるかどうかを判断し、結果をコンソールに出力します。このうち、要素 1 の表示スタイルを none、要素 2 の表示スタイルを block に設定し、:visible セレクターを使用することで、要素の表示状態を正確に判断できます。

2. 要素の表示ステータスを決定する

:visible セレクターを使用することに加えて、要素の表示属性と可視性属性を判断することによって要素の表示ステータスを決定することもできます。。以下に例を示します。

<!DOCTYPE html>
<html>
<head>
  <title>判断元素的可见状态</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="element3" style="display: none;">元素3</div>
  <div id="element4" style="display: block;">元素4</div>

  <script>
    if ($('#element3').css('display') !== 'none' && $('#element3').css('visibility') !== 'hidden') {
      console.log('元素3可见');
    } else {
      console.log('元素3不可见');
    }

    if ($('#element4').css('display') !== 'none' && $('#element4').css('visibility') !== 'hidden') {
      console.log('元素4可见');
    } else {
      console.log('元素4不可见');
    }
  </script>
</body>
</html>

ログイン後にコピー

この例では、ID が element3 と element4 である 2 つの要素が表示されるかどうかを判断します。要素の表示属性と可視性属性を取得することにより、要素の表示状態を正確に判断できます。