[Javascript&jQuery] 요소의 scrollHeight 구하기&배열 최대/최소값

두가지의 textarea의 scrollHeight를 비교해서 긴쪽에 맞춰줘야 할 일이 생겼다.

하지만 향후 늘어날 수도 있기 때문에 여러개의 textarea를 비교해서 맞춰주는 방식을 알아보도록 하자.

 

요소의 scrollHeight를 구하는 방식 자체는 아래와 같다.

 

$(selector).prop('scrollHeight');

 

javascript를 활용해서 최대, 최소를 구하는 방식은 아래를 참고했다.

programmingsummaries.tistory.com/108

[JavaScript] 배열 요소 중 최대값 최소값 찾기

 

 

아래의 세가지 요소중 scrollHeight가 가장 큰값/작은값에 맞춰서 높이를 변경해보도록 하자.

아무것도 안해준 상태

 

<script type="text/javascript">
	$(function(){
		var txtArea = $('textarea');
		var heightArr = [];
		
		$.each(txtArea, function(index, item){
			heightArr.push($(item).prop('scrollHeight'));
		});
		
		var max = heightArr.reduce(function (prev, curr) { 
			return prev > curr ? prev:curr;
		});
		
		var min = heightArr.reduce(function (prev, curr) { 
			return prev > curr ? curr:prev;
		});
		
		$(txtArea).height(max);
	});
</script>

 

scrollHeight 값들이 들어있는 배열을 만들고, reduce함수를 사용해서 구해주었다.

 

 

max일때

min일때

 

reduce의 동작방식에 대해서는 아래의 글을 한번 읽어보도록 하자.

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Array.prototype.reduce() - JavaScript | MDN