다른 요소를 기반으로 강하게 숨기는 요소에 대한 튜토리얼

다른 요소를 기반으로 강하게 숨기는 요소에 대한 튜토리얼

이 기사에서는 JavaScript를 사용하여 하나의 컨테이너 요소의 높이 (예 : Show More 버튼)의 높이를 기반으로 다른 요소를 동적으로 숨기거나 표시하는 방법을 설명합니다. 핵심 아이디어는 컨테이너 요소의 높이를 가져 와서 사전 설정 최대 높이와 ​​비교하여 "더 많은 표시"버튼을 숨길 것인지 결정하는 것입니다. 이 방법은 간단하고 효과적이며 사용자 경험을 향상시키고 불필요한 요소 디스플레이를 피할 수 있습니다.

웹 개발에서는 종종 페이지의 내용에 따라 요소 표시를 동적으로 조정해야 할 필요성이 발생합니다. 예를 들어, 컨테이너의 컨텐츠 높이가 특정 한계를 초과하면 "더 많은 표시"버튼이 표시됩니다. 그렇지 않으면 사용자의 불필요한 클릭을 피하기 위해 버튼이 숨겨집니다. 다음은이 기능을 자세히 구현하는 방법을 소개합니다.

HTML 구조

먼저 컨텐츠를 저장하려면 DIV와 같은 컨테이너 요소가 필요합니다. 동시에 "더 많은 표시"버튼도 필요합니다.

 <div class="ccontainer" id="ccontainer">
  <p id="context"> content 1 </p>
  <div class="img" id="cntimgcon">
    <img  src="images%20%5C%20image2.jpg" id="cntimgp1" alt="다른 요소를 기반으로 강하게 숨기는 요소에 대한 튜토리얼" >
  </div>
  <p id="context"> content 2 </p>
</div>
<button class="showmore"> 더 많은 </button>

이 예에서 CCContainer는 컨테이너 요소의 ID이며 Showmore는 "More Show"버튼의 클래스입니다.

자바 스크립트 코드

다음으로 JavaScript 코드를 사용하여 컨테이너의 높이를 결정하고 높이를 기반으로 표시 더 버튼을 숨기거나 표시하십시오.

 const btn = document.querySelector ( '. Showmore'); // 버튼 요소를 가져옵니다 const const 컨테이너 = document.querySelector ( '#ccontainer'); // 컨테이너 요소를 가져옵니다. const height = container.clientHeight; // 컨테이너의 실제 높이를 얻습니다. const maxheight = 530; // 최대 높이를 설정하면 (높이 <p> <strong>코드 설명</strong></p><ol>
<li> <strong>요소 가져 오기 :</strong> 문서를 사용하여 "more 표시"버튼과 컨테이너 요소를 각각 가져옵니다.</li>
<li> <strong>GET HEIGH :</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 코드를 실행하십시오. 태그 하단에 코드를 배치하거나 DomContentLoaded 이벤트 리스너를 사용할 수 있습니다.
• 컨테이너의 내용이 동적으로로드되면 컨텐츠가로드 된 후 버튼이 올바르게 표시되도록이 JavaScript 코드를 다시 실행해야합니다.
• Maxheight의 값은 실제 요구에 따라 조정할 수 있습니다.
• display = ''요소 유형에 따라 요소의 기본 표시 속성 값 (일반적으로 인라인, 블록 또는 인라인 블록 값을 복원합니다.

완전한 예

 


<title> 높이 </title>에 따라 요소를 숨 깁니다

  .ccontainer {
    너비 : 300px;
    국경 : 1px Solid #CCC;
    패딩 : 10px;
    오버플로 : 숨겨진;
    최대 높이 : 530px; /* 초기 최대 높이, 시각 효과에만 해당*/
  }
스타일>



<div class="ccontainer" id="ccontainer">
  <p id="context"> 이것은 컨테이너 높이를 기반으로 더 많은 표시 버튼을 숨기는 방법을 보여주는 컨텐츠의 예입니다. "더보기"버튼은 컨테이너의 내용이 특정 높이를 초과 할 때만 표시됩니다. </p>
  <p id="context"> 이것은 컨테이너 높이를 기반으로 더 많은 표시 버튼을 숨기는 방법을 보여주는 컨텐츠의 예입니다. "더보기"버튼은 컨테이너의 내용이 특정 높이를 초과 할 때만 표시됩니다. </p>
  <p id="context"> 이것은 컨테이너 높이를 기반으로 더 많은 표시 버튼을 숨기는 방법을 보여주는 컨텐츠의 예입니다. "더보기"버튼은 컨테이너의 내용이 특정 높이를 초과 할 때만 표시됩니다. </p>
</div>

<button class="showmore"> 더 많은 </button>

<cript>
  const btn = document.querySelector ( '. Showmore');
  const 컨테이너 = document.querySelector ( '#ccontainer');
  const height = container.clientHeight;
  Const Maxheight = 530;

  if (높이 


</cript>

위 내용은 다른 요소를 기반으로 강하게 숨기는 요소에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!