別の要素に大きく基づいて、要素を隠すためのチュートリアル

別の要素に大きく基づいて、要素を隠すためのチュートリアル

この記事では、JavaScriptを使用して、1つのコンテナ要素の高さ（ショーモアボタンなど）に基づいて別の要素を動的に非表示または表示する方法について説明します。コアのアイデアは、コンテナ要素の高さを取得し、プリセットの最大高さと比較することにより、「もっと表示」ボタンを隠すかどうかを判断することです。この方法はシンプルで効果的であり、ユーザーエクスペリエンスを改善し、不必要な要素ディスプレイを回避できます。

Web開発では、ページのコンテンツに従って要素の表示を動的に調整する必要性に遭遇することがよくあります。たとえば、コンテナのコンテンツの高さが一定の制限を超えると、「もっと表示」ボタンが表示されます。そうしないと、ユーザーからの不必要なクリックを避けるためにボタンが隠されます。以下では、この関数を詳細に実装する方法を紹介します。

HTML構造

まず、コンテンツを保存するには、divなどのコンテナ要素が必要です。同時に、「もっと表示する」ボタンも必要です。

 <div class="ccontainer" id="ccontainer">
  <p id="context">コンテンツ1 </p>
  <div class="img" id="cntimgcon">
    <img  src="images%20%5C%20image2.jpg" id="cntimgp1" alt="別の要素に大きく基づいて、要素を隠すためのチュートリアル" >
  </div>
  <p id="context">コンテンツ2 </p>
</div>
<button class="showmore">もっと</button>を表示します

この例では、CContainerはコンテナ要素のIDであり、Showmoreは「More」ボタンのクラスです。

JavaScriptコード

次に、JavaScriptコードを使用してコンテナの高さを決定し、高さに基づいて[より多くのボタン]ボタンを非表示または表示します。

 const btn = document.queryselector（'。showmore '）; //ボタン要素const container = document.queryselector（ '＃ccontainer'）を取得します; //コンテナ要素const height = container.clientheightを取得します。 //コンテナの実際の高さを取得const maxheight = 530; //最大高さを設定するif（height <p><strong>コード説明</strong></p><ol>
<li>
<strong>要素を取得する：</strong> document.queryselector（）メソッドを使用して、それぞれ「もっと表示」ボタンとコンテナ要素を取得します。</li>
<li>
<strong>高さを取得：</strong> ClientHeightプロパティを使用して、コンテナの実際の高さを取得します。 clientheightプロパティは、内側のマージンを含む要素の可視高さを返しますが、巻物と境界は含まれません。</li>
<li>
<strong>最大高さを設定します：</strong>可変maxheightを定義して、コンテナの最大高さを設定します。</li>
<li>
<strong>条件付き判断：</strong> IFステートメントを使用して、容器の高さが最大高さ以下であるかどうかを判断します。</li>
<li>
<strong>ボタンを非表示または表示：</strong>コンテナの高さが最大高さ以下の場合、表示のディスプレイスタイルをより多くのボタンを設定しないため、ボタンを隠します。それ以外の場合は、ボタンを表示するには、表示スタイルを空の文字列に設定します。</li>
</ol><p><strong>注意すべきこと</strong></p>

• DOMのロード後にJavaScriptコードを実行してください。コードを<script>タグの下部に配置するか、domcontentloadedイベントリスナーを使用できます。</script>
• コンテナのコンテンツが動的にロードされている場合は、コンテンツがロードされた後にボタンが正しく表示されるようにこのJavaScriptコードを再実行する必要があります。
• MaxHeightの価値は、実際のニーズに応じて調整できます。
• display = ''は、要素のタイプに応じて、通常はインライン、ブロック、またはインラインブロックの要素のデフォルトの表示属性値を復元します。

完全な例

<title>高さに基づいて要素を非表示</title>
<style>
  .ccontainer {
    幅：300px;
    ボーダー：1pxソリッド#ccc;
    パディング：10px;
    オーバーフロー：隠し;
    Max-Height：530px; /*視覚効果のみの初期最大高さ*/
  }
</style>



<div class="ccontainer" id="ccontainer">
  <p id="context">これは、コンテナの高さに基づいてショーボタンを非表示にする方法を示すコンテンツの例です。 「詳細を表示」ボタンは、コンテナのコンテンツが特定の高さを超えた場合にのみ表示されます。 </p>
  <p id="context">これは、コンテナの高さに基づいてショーボタンを非表示にする方法を示すコンテンツの例です。 「詳細を表示」ボタンは、コンテナのコンテンツが特定の高さを超えた場合にのみ表示されます。 </p>
  <p id="context">これは、コンテナの高さに基づいてショーボタンを非表示にする方法を示すコンテンツの例です。 「詳細を表示」ボタンは、コンテナのコンテンツが特定の高さを超えた場合にのみ表示されます。 </p>
</div>

<button class="showmore">もっと</button>を表示します


  const btn = document.queryselector（'。showmore '）;
  const container = document.queryselector（ '＃ccontainer'）;
  const height = container.clientheight;
  const maxheight = 530;

  if（height 

要約します

上記の手順を通じて、コンテナ要素の高さに応じて「もっと表示」ボタンを動的に非表示または表示する機能を実現できます。この方法はシンプルで効果的であり、ユーザーエクスペリエンスを改善し、不必要な要素ディスプレイを回避できます。 CSSクラス名を使用してボタンの表示ステータスを制御するか、アニメーション効果を使用してボタンをスムーズに表示または非表示にするなど、実際のニーズに応じて調整できます。

以上が別の要素に大きく基づいて、要素を隠すためのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。