-
요소 높이 맞추기Javascript 2024. 8. 7. 17:22반응형
요소 높이 맞추기
→ 리스트 내의 각 요소들은 display: flex로 나열한 요소들이라 하나가 길어지면 다른 요소들의 높이도 가장 긴 높이에 맞춰지므로, 가장 바깥쪽 높이는 신경 안써도 된다. 그러나 텍스트 부분이 길어지는 경우에는 텍스트 길이에 따라 텍스트 영역이 아래 이미지처럼 들쑥날쑥 해진다.
이 때, 1개만 생각하면 된다.
가장 긴 텍스트를 가진 요소의 높이에 다른 요소들을 맞춰준다.
➡️ html
<div class="my_swiper"> <ul class="swiper-wrapper tab_content"> <li class="swiper-slide selected"> <a href="#" class="tab_content_link"> <div class="img_wrap"></div> <div class="info_option"> <span class="price">0</span> <div class="option_name">기본구성기본구성기본구성기본구성</div> </div> </a> </li> <li class="swiper-slide"> <a href="#" class="tab_content_link"> <div class="img_wrap"></div> <div class="info_option"> <span class="price">0</span> <div class="option_name">기본구성</div> </div> </a> </li> <li class="swiper-slide"> <a href="#" class="tab_content_link"> <div class="img_wrap"></div> <div class="info_option"> <span class="price">0</span> <div class="option_name">기본구성</div> </div> </a> </li> <li class="swiper-slide"> <a href="#" class="tab_content_link"> <div class="img_wrap"></div> <div class="info_option"> <span class="price">0</span> <div class="option_name">기본구성</div> </div> </a> </li> <li class="swiper-slide"> <a href="#" class="tab_content_link"> <div class="img_wrap"></div> <div class="info_option"> <span class="price">000,000</span> <div class="option_name">슬라이드 욕실장(메이플) 1200*650 + 선반 1200</div> </div> </a> </li> </ul> </div>
1. 반환값 사용 x - 전역변수로 처리
let options = document.querySelectorAll('.option_detail .tab_content li'); let optionTxt = document.querySelectorAll('.option_detail .tab_content .info_option'); let currentOptionHeight; let optionTxtHeight = []; // 옵션 높이, 옵션 텍스트부분 높이 체크 function chkOptionHeight() { currentOptionHeight = options[0].offsetHeight - 2; // 옵션 높이 - 보더값 2px optionTxt.forEach(optionTxt => { let currentOptionTxtHeight = optionTxt.offsetHeight; optionTxtHeight.push(currentOptionTxtHeight); }) } // 체크한 높이로 업데이트 function updateOptionHeight(optionHeight, optionTxtHeight) { options.forEach(option => { option.style.height = optionHeight + 'px'; }) optionTxt.forEach(optionTxt => { optionTxt.style.height = optionTxtHeight + 'px'; }) } document.querySelector('.order_btn').addEventListener('click', function() { // 옵션 높이, 옵션 텍스트부분 높이 체크 chkOptionHeight(); // 옵션 텍스트 높이 중 가장 긴 높이 체크 let optionTxtMaxHeight = Math.max(...optionTxtHeight); // 체크한 높이로 업데이트 updateOptionHeight(currentOptionHeight, optionTxtMaxHeight); })
2. 반환값으로 처리
let options = document.querySelectorAll('.option_detail .tab_content li'); let optionTxts = document.querySelectorAll('.option_detail .tab_content .info_option'); // 옵션 높이, 옵션 텍스트부분 높이 체크 function getOptionHeight() { const currentOptionHeight = options[0].offsetHeight - 2; // 옵션 높이 - 보더값 2px let optionTxtHeight = Array.from(optionTxts, text => text.offsetHeight); //forEach 대신에 Array.from()으로 써봄 // Array.from() 유사배열을 배열로 바꿔줌 return {currentOptionHeight, optionTxtHeight}; } // 체크한 높이로 업데이트 function setOptionHeight(optionHeight, optionTxtHeight) { options.forEach(option => {option.style.height = optionHeight + 'px';}) optionTxts.forEach(optionTxt => {optionTxt.style.height = optionTxtHeight + 'px';}) } // 높이 모두 삭제 function clearHeights() { options.forEach(option => option.style.height = ''); optionTexts.forEach(text => text.style.height = ''); } document.querySelector('.order_btn').addEventListener('click', function() { // 옵션 높이, 옵션 텍스트부분 높이 체크 let {optionTxtHeight, currentOptionHeight} = getOptionHeight(); // 옵션 텍스트 높이 중 가장 긴 높이 체크 let optionTxtMaxHeight = Math.max(...optionTxtHeight); // 체크한 높이로 업데이트 setOptionHeight(currentOptionHeight, optionTxtMaxHeight); }) document.querySelector('.close_btn').addEventListener('click', clearHeights)
* 얕게 복사, 깊게 복사
* 유사 배열 객체
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/max
'Javascript' 카테고리의 다른 글
비동기 vs 동기 (0) 2023.06.28 자바스크립트 특징 (0) 2023.04.27 스코프(scope)와 호이스팅(hoisting) (0) 2023.04.10