Как динамически изменить размер HTML-документа?
Как я могу динамически изменять размер HTML-документа после нажатия кнопки с помощью JavaScript?
Есть див "сайт-обертка", который уменьшается с 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)');
}
});
Вставьте код HTML вместе с кодом jQuery, чтобы нам не пришлось заново вводить весь ваш код.
Я бы убрал вашу почту со скриншота...
Вы можете загружать изображения вместе с вашим постом. Stack Overflow имеет собственный экземпляр imgur.
Я не могу загрузить изображения, потому что! не иметь 10 репутации
Все размеры в css задаются в пикселях, и если я изменяю высоту или ширину site-wrapper, он меняется, но все содержимое внутри нет.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Итак, дело в том, что transform: scale() предназначен только для визуального эффекта и фактически не изменяет размер элемента. Следуйте блочной модели в элементе проверки, чтобы подтвердить то же самое.
Таким образом, взломать то, что вам нужно, может быть
Добавьте непосредственный элемент-оболочку в .сайт-обертка (скажем,
.fluid-site-wrapper).Добавьте правило стиля
transform-origin: top;в .сайт-обертка.- Применяя правило transform: scale() к .сайт-обертка, также уменьшите высоту .fluid-сайт-обертка и наоборот.
который изменит ваш код на:
$('.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.
Вы не пробовали просто изменить ширину элемента
site-wrapper? Я предполагаю, что это желаемая функциональность в любом случае? Поправьте меня если я ошибаюсь?