时间戳

首页 > 解决方案 > 如何动态调整 HTML 文档的大小？

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

问题描述

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

transform: scale()单击菜单按钮后，有一个“站点包装器” div 会减少。但是单击前文档的高度仍然存在。这是它的外观：

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

$('.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)');
    }
});

标签： javascriptjqueryhtmlcss

解决方案

所以事情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 缓存中的链接。

推荐阅读