基本JS - 这个功能好吗？

Question

我有一个带有垂直居中控件的旋转木马（猫头鹰旋转木马）。由于结构，我必须绝对定位上一个和下一个箭头。由于页面是响应式的，因此它们的位置是动态的。控件的大小也可能会改变。

我编写了一个在加载和调整大小时运行的函数。它获取图像的高度和控件的高度，从后者中减去后者，除以2，然后使用该数字作为控件＆＃39;边距。

它有效，但我在质疑我是否正确获取和使用所有变量。 JavaScript按顺序读取吗？它运行第一行，然后是下一行，然后是下一行...我在CSS中很强大，但JS一直是一个拐杖。

我可以更有效地写这个吗？

＆＃13;

＆＃13;

function centerCarouselControls() {
  var carouselImage = $('.carousel-card > img');
  var carouselControls = $('.owl-nav > div');
  var carouselHeight = carouselImage.outerHeight();
  var controlHeight = carouselControls.outerHeight();
  var controlMargin = (carouselHeight - controlHeight) / 2;
  carouselControls.css('margin-top', controlMargin);
}

$('.carousel-card > img').load(centerCarouselControls);
$(window).on('resize', centerCarouselControls);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

我觉得这可能是因为不够具体而被标记在这里的问题类型。如果是这样的话，有人可以请我指一个更合适的社区吗？谢谢！

Answer 1

在某些浏览器中，您的代码就像firefox 51一样，但它的代码更完整：

carouselControls.css('margin-top', controlMargin + 'px');