JS関数はwindow.resizeでのみ有効になります

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(); });