在不刷新页面的情况下使用 Javascript/jQuery 动态更改 outerHeight

Question

我正在尝试动态更改 #mainPart 的 marginTop，这是 nav 项目之后 navbar-fixed-top class.

的部分

我遇到的问题是，使用此功能，我必须刷新页面才能发生更改 - 才能设置边距。但是，我希望它在按下 Submit 按钮时发生。 Submit按钮不会刷新页面，只是根据查询的关键字结果输出数据。 Submit HTML 中的按钮本身具有 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？谢谢！

Answer 1

您可以随时添加

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

提交按钮的另一个事件侦听器。我不知道 do_Submit 函数，但如果那个按钮只是一个 html 元素，那么 select 它在 JS 中添加 CSS 更改为按钮自己的事件侦听器，而不是在页面加载时。

在不刷新页面的情况下使用 Javascript/jQuery 动态更改 outerHeight

Dynamically change outerHeight using Javascript/jQuery without refreshing the page

javascript

html

jquery

css

margin