jQuery if 두 번 이상 무한대, 화면 크기별로 높이 비교해서 css 변경 예제

This topic has 0개 답변, 1명 참여, and was last updated 1 year, 11 months 전에 by 개꿀몬(GKKmon).

0 답변 글타래를 보이고 있습니다

글쓴이

글

2020-01-08 18:02 #4248 Reply

개꿀몬(GKKmon)

참가자

토픽 30
답변 3

@gkkmon

이런 식으로 if 안에 그대로 if문 넣어서 무한정 늘릴 수 있음.
코드는 ‘#page-breadcrumb’, ‘#page-titlebar’ 등의 height css를 읽어들인 다음에, 그걸 이용해서 높이 비교하고, 크고 작음에 따라 if문으로 다른 요소의 css를 제어하는 것임. 천천히 보면 다 알아볼 수 있게 코딩해 놨음.

<script>
if($(window).width() < 1024) {
		
	$(document).ready(function () {
	var height0 = $('#height0').height()
	var height1 = $('#page-breadcrumb').height()
	var height2 = $('#page-titlebar').height()
	var height3 = $('.titlebar-tagline').height()

		if (height2 <height0) {
        
			if (height1 <height0) {
        	$("#sidebar-primary").css("top", "-42px");
    		} else {
			$("#sidebar-primary").css("top", "-70px");
    		}
		
    	} else {
		
			if (height1 <height0) {
        	$("#sidebar-primary").css("top", "-86px");
    		} else {
			
				if (height3 <height0) {
        		$("#sidebar-primary").css("top", "-114px");
    			} else {
				$("#sidebar-primary").css("top", "-141px");
    			}
			
    		}
		
    	}
		
	});
				
}
</script>