Question

我有一个带有页眉的模板，其边距根据我所在的页面而变化。

我的模板类似于：

<div class="header"> Title - Menu </div>

除了margin-bottom

之外，每个页面中的标题相同

我有这个jQuery代码可以解决一个问题（这是每页顶部的内联代码）：

$(function () {  $(".header").css("margin-bottom","0px"); });

或

$(function () {  $(".header").css("margin-bottom","30px"); });

问题是我看到带有模板边距的页面，然后动态更改边距。它看起来很糟糕，刷新时它在标题和正文之间有一个空白区域，然后在1秒后消失。

Answer 1

这是因为您正在更改页面加载的边距。即在$（function（）{}）里面。因此，您的css边距代码仅在整个页面加载后运行。这可能需要一些时间。

所以你可以做几件事。 1.在div标签后面立即使用脚本标记

<div class="header"> Title - Menu </div>
<script>
   $(".header").css("margin-bottom","0px");
</script>

这假定jquery已加载（可能高于body标签？）

然而，这不是一般做法。 2.第二个选项是将样式直接分配给div

<div class="header" style="margin-bottom: 0px;"> Title - Menu </div>

Answer 2

假设你的CSS正在你的标题中声明，如果你在文档加载后用jQuery重新定义它，你会看到一个风格的变化。这是因为，在DOM填充时渲染CSS时，只有在整个页面完成后才会触发jQuery。

在jQuery中真的没有必要这样做。如果您想保持内联更改，只需在主样式表后添加如下内容，并针对每个页面进行调整：

<style type="text/css">
    .header {
        margin-bottom: 30px;
    }
</style>

当然，如果jQuery是这方面的要求，使用IIFE功能将起作用。

Answer 3

我更喜欢在服务器端使用两种不同的CSS样式呈现标题的解决方案。这样可以完全避免这个问题。

如果没有其他工作，您可以强制浏览器在它仍在解析页面时更早地评估脚本：

<div class="header"> Title - Menu </div>
<script>$(".header").css("margin-bottom","0px");</script>

这会强制浏览器在创建div之后但在考虑下一个元素之前评估脚本。请注意，DOM目前还不完整。它确保div存在，但这两行之后的事情可能会或可能不存在。

Answer 4

尝试一下：

$(document).ready(function(){$('.header').css("margin-bottom","0px"); });