使用transform：scale

Question

我有一个幻灯片，除了活动元素之外的所有元素都有变换比例（0.925）。我需要获取所有元素的总宽度并将其应用于父元素。

$(slides).each(function() {
    console.log($(this).outerWidth());
    tot_width += $(this).outerWidth();
});

$('ul').css({width: tot_width});

由于元素的缩放，tot_width是错误的。我该如何解决这个问题？

Answer 1

假设您已经显示它们，可以使用

tot_width += $(this)[0].getBoundingClientRect().width;

Answer 2

您可以检查每个元素是否处于活动状态，然后乘以比例因子：

$(slides).each(function() {
    var width = $(this).outerWidth();
    if (!($(this).hasClass('active'))) {
        width = width * .925;
    }
    tot_width += width;
});