JS 함수는 window.resize에서만 활성화됩니다.

Question

'.getComputedStyle'을 사용하여 브라우저 창 중간에 세로로 객체를 정렬합니다. 이 함수는 페이지가로드되고 'window.resize'에 호출 될 때 호출됩니다.

브라우저 창 크기를 조정할 때만 문제가 발생하며 처음부터 작동하지 않습니다. 이 방법을 여러 번 사용했는데이 문제가 발생했을 때 처음입니다.

미리 감사드립니다.

http://codepen.io/SamuelVDP/pen/JbNZgM이

function controlHeight() { 
    var resCarousel; 

    for (var i = 0; i < carouselCell.length; i++) { 
    var carouselControl = window.getComputedStyle(carouselCell[i]); 
    var carouselWidth = carouselControl.width; 

    if (carouselWidth.length === 5) { 
     resCarousel = carouselWidth.substr(0, 3); 
    } else if (carouselWidth.length === 6) { 
     resCarousel = carouselWidth.substr(0, 4); 
    } else if (carouselWidth.length === 9) { 
     resCarousel = carouselWidth.substr(0, 7); 
    } else if (carouselWidth.length === 10) { 
     resCarousel = carouselWidth.substr(0, 8); 
    } 

    carouselCell[i].style.height = (resCarousel * 0.57) + 'px'; 
    carouselCell[i].style.marginTop = ((window.innerHeight - (resCarousel * 0.57))/2) + 'px'; 

    var p = document.getElementsByTagName('p')[0]; 
    var pControl = window.getComputedStyle(p); 
    var pHeight = pControl.height; 
    var resP = pHeight.substr(0, 2); 

    p.style.marginTop = ((window.innerHeight - resP)/2) + 'px'; 

    console.log(carouselCell[i].style.marginTop); 
    } 
} 

Answer 1

이벤트의 크기를 조절 창에서 함수를 호출 :

은 여기 내 codepen 및 JS 코드입니다.

$(window).resize(function(){ controlHeight(); });