Question

我创建了一个小脚本，使用js垂直居中。但是，它似乎不适用于window.onresize，我不明白为什么。顺便说一句，它在window.onload上工作得很完美，如果我要求，window.onresize会在调整大小时触发警报。这是我的代码：

%s

Answer 1

您是否尝试在调整窗口大小时提醒您所需的值？您应该尝试使用JQuery解决方案：

window.addEventListener('resize', resetHeight);

另外，我会尝试在HTML标记内使用onresize="resetHeight()"事件侦听器。如果有效，请告诉我！

Answer 2

在body标签中加载resize动作，如下所示

<body onresize="resetHeight()">

Answer 3

不是答案，而是一个建议，当你可以使用CSS时，为什么要使用javascript呢？它会表现得更好，并支持更多人。这是一个div的简单示例，它总是以它的容器为中心：

＆＃13;

#centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: red;
  width: 100px;
  height: 100px;
}

＆＃13;

<div id="centered">

</div>

＆＃13;

Answer 4

您可以尝试使用jquery来执行此操作，例如：

$(document).ready(function(){
  $( window ).resize(function() {
   var loginForm = document.querySelector('.login-form');
   var windowHeight = window.innerHeight;
   var topNavbarHeight = document.querySelector('.top-navbar').clientHeight;
   var loginFormHeight = loginForm.clientHeight;
   var footerHeight = document.querySelector('footer').clientHeight;
   var totalHeights = loginFormHeight + topNavbarHeight + footerHeight + 90;
   var halfHeight = (windowHeight-totalHeights) / 2;

   loginForm.style.paddingTop = halfHeight + "px";
   loginForm.style.paddingBottom = halfHeight+ "px";  
});

});

Answer 5

这是我写的一个jquery解决方案（对我而言）。有一个vanilla javascript答案会很棒。

var resetHeight = function(){
  var loginForm = $(".login-form");
  var loginFormHeight = loginForm.height();
  var windowHeight = $(window).height();
  var topNavbarHeight = $('.top-navbar').height();
  var footerHeight = $('footer').height();
  var totalHeights = loginFormHeight + topNavbarHeight + footerHeight + 90;
  var halfHeight = (windowHeight-totalHeights) / 2;
  loginForm.css({
    "padding-top":halfHeight,
    "padding-bottom":halfHeight
  });

} 

  $( document ).ready(function(){
   resetHeight();   
   window.addEventListener('resize', resetHeight);     
  });

Javascript函数没有在window.onresize上触发

5 个答案: