如何动态调整HTML文档的大小？

Question

使用JavaScript单击按钮后，如何动态调整HTML文档的大小？

点击菜单按钮后，“ site-wrapper” div随transform: scale()减小。但是单击之前文档的高度仍然存在。 看起来是这样：

$('.hamburger').click(function(){
    $(this).toggleClass('is-active');
    if ($(this).hasClass('is-active')) {
        $('.site-wrapper').css('transform', 'scale(0.5)');
        $('.top-line').css('position', 'relative');
        $('header').css('margin-top', '0');
    }
    else{
        $('.site-wrapper').css('transform', 'scale(1)');
    }
});

Answer 1

所以transform: scale()只是为了视觉效果，实际上并没有调整元素的大小。遵循检查元素中的框模型进行确认。

因此，可以满足您的需求

1. 将立即包装元素添加到 .site-wrapper -（例如.fluid-site-wrapper）。

2. 将样式规则transform-origin: top;添加到 .site-wrapper 。

3. 将transform：scale（）规则应用于 .site-wrapper 时，还可以减小 .fluid-site-wrapper 的高度，反之亦然。

这会将您的代码更改为：

$('.hamburger').click(function(){
    var $fluidSiteWrapper = $('.fluid-site-wrapper');
    $(this).toggleClass('is-active');
    if ($(this).hasClass('is-active')) {
        $('.site-wrapper').css('transform', 'scale(0.5)');
        $('.top-line').css('position', 'relative');
        $('header').css('margin-top', '0');
        $fluidSiteWrapper.css("height",$fluidSiteWrapper.height()/2); // if scale if 0.5
    }
    else{
        $('.site-wrapper').css('transform', 'scale(1)');
        $fluidSiteWrapper.css('height, '');
    }
});

我还建议您使用添加/删除类来代替添加/删除内联样式。另外，请研究有关jQuery和DOM Caching中的链接。