Question

大家好，我正在尝试动态更改元素的高度。这些是我的变数。

var windowWidth = 1440;
var currentWidth = $(window).width();
var elementHeight = $('#line4').height();

现在我想要的是当窗口宽度和当前宽度之间的差异低于6时我想要更改元素的高度。我希望每次（windowWidth - currentWidth）＆lt; 6时都这样做。因此，每当窗口调整大小并且低于6时，我想要将元素的高度改为减去14px。这就是我尝试过的。

$( window ).bind("resize", function(){
    if((windowWidth - currentWidth)<6) {
        $("#line4").css('height', elementHeight-14);
    }
});

它不起作用，我不知道我错过了什么。此外，我可以通过这种方式更改其他CSS属性。对于这个特殊问题，我还需要以相同的方式更改css top属性，因为我有一些具有绝对位置的div。

Answer 1

您需要在每次调整大小事件时测量窗口的当前宽度，因为它也会发生变化。

var windowWidth = 1440;
var currentWidth = $(window).width();
var elementHeight = $('#line4').height();

$( window ).bind("resize", function(){
  currentWidth = $(window).width()
  if((windowWidth - currentWidth)<6) {
    $("#line4").css('height', elementHeight-14);
  }
});

Answer 2

每次调用resize事件时都需要获取windowWidth 你应该在resize事件中添加去抖动以获得更好的性能。我经常喜欢这样，也许你可以搜索更好的方式：

var resizeTimer;
$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

  // Run code here, resizing has "stopped"
  currentWidth = $(window).width()
  if((windowWidth - currentWidth)<6) {
    $("#line4").css('height', elementHeight-14);
  }

  }, 250);
});

我创建了这个测试，你可以尝试一下。顺便说一句，我从6增加到600，以便更容易检查：D https://codepen.io/huytran0605/pen/NgBEVO

调整大小时元素的高度

2 个答案: