使用Javascript/jQuery动态改变outerHeight而不刷新页面答案

【问题标题】：Dynamically change outerHeight using Javascript/jQuery without refreshing the page使用Javascript/jQuery动态改变outerHeight而不刷新页面
【发布时间】：2021-10-29 08:16:09
【问题描述】：

我正在尝试动态更改#mainPart 的marginTop，这是nav 带有navbar-fixed-top 类的项目之后的部分。

我遇到的问题是，使用此功能，我必须刷新页面才能进行更改 - 以便设置边距。但是，我希望它在按下Submit 按钮时发生。 Submit 按钮不刷新页面，它只是根据查询到的关键字结果输出数据。 HTML 中的Submit 按钮本身具有ng-click 和do_Submit 功能。

我创建了下面的函数并将其添加到do_Submit 函数中，但它仅在我刷新页面时才起作用，而不是在我按下Submit 按钮时起作用

$(window).load(function() {
  maxHeight = $('#main-navbar').outerHeight();
  alert("Height of main-navbar: " + maxHeight);
  $('#mainPart').css({ marginTop : maxHeight + 5 + 'px' }); 
});

注意#main-navbar 是 HTML 中 nav 部分的 ID，#mainPart 是紧跟在 nav 部分之后的部分的 ID。

我的提交按钮的 HTML：

<button type="button" class="btn" tooltip ng-click="submit(query)" title="<p>Query sentences</p>"><span ></span> Submit</button>

如何在不刷新页面的情况下动态更改marginTop？谢谢！

【问题讨论】：

您能否添加一个包含测试所需的 html 标记的最小示例？
我看不到您是如何将功能添加到提交按钮的，请您给我们看看。
你上面写的代码是放在jQuery的.load函数里面的，显然只有在页面加载时才会执行。
对不起，我是前端开发的新手。但是，为了更好地解释我所拥有的：我有具有 navbar-fixed-top 类的导航部分。本部分将输入的查询显示为文本（在我点击提交按钮后）。然后，表格根据查询显示在导航部分下方。如果我查询较长的句子，则导航部分的高度会增加，因为查询的句子在此导航部分中显示为文本。一旦此导航部分的高度增加，它会覆盖表格的顶部，因此看不到第一个元素。那是为什么我要根据导航部分的高度动态更改此表的上边距。
@Mohi ，是否有任何其他功能我可以使用它不需要重新加载页面？另外，我将展示我用于提交按钮的提交功能。现在正在尝试更新我的问题。

标签： javascript html jquery css margin

【解决方案1】：

你总是可以添加

$('#mainPart').css({ marginTop : maxHeight + 5 + 'px' });

提交按钮的另一个事件监听器。我不知道 do_Submit 函数，但如果该按钮只是一个 html 元素，则在 JS 中选择它并将 CSS 更改添加到按钮自己的事件侦听器，而不是在页面加载时。

【讨论】：

感谢您的回答。是的，在 do_Submit 中找到了事件监听器。它基本上是一个带有 post 方法的 HTTP 请求。我将计算和更改 margintop 的那两行放在 .success 函数中——如果 HTTP 请求成功则输出图形的函数。谢谢！