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

概述使用JavaScript单击按钮后,如何动态调整HTML文档的大小？单击菜单按钮后,有一个“站点包装器” div随着以下变换而减小：scale().但是单击之前文档的高度仍然存在.它是这样的：$('.hamburger').click(function(){ $(this).toggleClass('is-active'); if ($(th

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

单击菜单按钮后,有一个“站点包装器” div随着以下变换而减小：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)');    }});

最佳答案事情就是转换了：scale()只是为了视觉效果,实际上并没有调整元素的大小.按照检查元素中的框模型进行确认.

因此,可以满足您的需求

>将即时包装元素添加到.site-wrapper-(例如.fluID-site-wrapper).
>添加样式ruletransform-origin：top;到.site-wrapper.
>在对.site-wrapper应用transform：scale()规则时,还应减小.fluID-site-wrapper的高度,反之亦然.

这会将您的代码更改为：

$('.hamburger').click(function(){    var $fluIDSiteWrapper = $('.fluID-site-wrapper');    $(this).toggleClass('is-active');    if ($(this).hasClass('is-active')) {        $('.site-wrapper').CSS('transform','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中的链接. 总结

以上是内存溢出为你收集整理的javascript-如何动态调整HTML文档的大小？ 全部内容，希望文章能够帮你解决javascript-如何动态调整HTML文档的大小？ 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。