jquery - 计算调整前的元素宽度与调整后的宽度

为了设置元素的边距，我想计算浏览器调整大小前后的大小差。我将如何在resize函数外部访问resizeW变量，或在resize函数内部使用startW而不更改它。

var startW = $('li').width(); // width before resize
$(window).resize(function() {
    var resizeW = $('li').width(); // width after resize
    var diff = (startW - resizeW); // startW and resizeW are the same
} );
$('li').css('margin-left',(startW - resizeW)); // resizeW is not defined

例如：如果在调整大小之前获取宽度为300像素的元素，然后触发调整大小。之后，该元素为200像素。我想计算差异。 300-200

最佳答案

var $li = $('li'),         // Cache your element
    startW = $li.width();  // Store a variable reference

function setMarginDiff(){  // Create a function that modifies the margin
    var currW = $li.width(),
        diff = startW - currW ;
    $li.css({marginLeft : diff});
}

setMarginDiff();                 // Do on DOM ready
$(window).resize(setMarginDiff); // and on resize