僅在window.resize上激活JS函數

Question

我使用'.getComputedStyle'在瀏覽器窗口中間垂直對齊對象。該函數在頁面加載時和'window.resize'時被調用。

問題是隻有在調整瀏覽器窗口大小時才起作用，從一開始就不起作用。我多次使用這種方法，這是我第一次遇到這個問題。

在此先感謝！

這裏是我的codepen和JS代碼：

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

打電話給你的窗口功能調整事件。

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