JS 操作 DOM，然后 CSS 在刷新时无法正确加载，即使缓存已禁用

Question

问题

嗨，我有一些 JS 可以在需要时操纵 DOM 显示/隐藏某些元素。当事件处理程序被触发时它可以完美地工作。问题是，当我通过单击每个浏览器都有的重新加载按钮刷新页面时：CSS 几乎所有内容都变得混乱。

它再次变得完美的唯一方法是，如果我单击指向相同 JS 所在页面的链接。

当我把下面的JS注释掉之后，刷新就没有问题了。所以我知道这就是问题所在。就好像浏览器正在缓存它一样。

我已经尝试过

我在开发工具中禁用了缓存：右键单击>检查>网络>禁用缓存已打开。

我也使用基于 Chrome 的浏览器完成了

ctrl+f5

，但没有任何效果。

代码

main.css

form > p {
    position: absolute;  /* hide most p's that will be shown when event is fired */
    right: -1000px;
}

form p:first-of-type {
    position: static;  /* first p element is not hidden */
}

my.js

var form_p_wrappers = document.querySelectorAll('form > p');
for (var i=0; i < form_p_wrappers.length; i++) {
    form_p_wrappers[i].style.position = 'static';    // make form p's visible
}

我知道这通常不是一个好的做法

obj.style.x = 'value';

...添加/删除类通常要容易得多，并且从来没有给我带来问题（事实上，这在这里工作得很好）...

但是我最近遇到了这个问题，在这种情况下，如果它按照我想要的方式工作的话，按照上面的方式进行会更快更容易编写......

问题

1. 有谁知道为什么它没有像我期望的那样正确地重新加载 CSS，除非我单击页面的链接？？

2. 有没有办法让它按照我想要的方式工作而不添加类？同样，添加/删除一个类效果很好，但在这种情况下，用上面的方式编写它会更快。我只是想知道为什么它没有按我预期的方式工作。

谢谢！

Answer 1

听起来您所看到的问题是由于 JavaScript 与 CSS 交互的方式造成的，尤其是当您直接在元素上设置样式时。刷新页面时，这有时会导致意外行为。

发生了什么：

当您使用 element.style.position = 'value'; 时，您将直接将内联样式应用于元素，这将覆盖任何外部 CSS。这可能会导致冲突，尤其是在页面重新加载时，因为浏览器可能会过早地重新应用这些内联样式，或者以扰乱 CSS 布局的方式重新应用这些内联样式。

另一方面，当您通过单击链接进行导航时，页面会干净地重新加载，并且 CSS 会正确应用，而不会受到 JavaScript 的任何干扰。但浏览器刷新有时不会以相同的方式完全重置所有内容，从而导致 CSS 损坏。

您可以尝试的解决方案：

切换到使用类 虽然您提到添加/删除课程有效，但这确实是最佳实践。通过切换类，您可以避免覆盖内联样式，而是让 CSS 处理一切：

form_p_wrappers[i].classList.add('visible');

在你的 CSS 中：

.visible {
    position: static;
}

这将确保您的样式在重新加载时保持完整。

延迟 JavaScript 直到页面完全加载 另一件要尝试的事情是确保 JavaScript 仅在页面（和所有 CSS）完全加载后运行。有时，JS 可能执行得太早并导致样式问题。您可以使用 window.onload 事件来实现：

window.addEventListener('load', function() {
    var form_p_wrappers = document.querySelectorAll('form > p');
    for (var i = 0; i < form_p_wrappers.length; i++) {
        form_p_wrappers[i].style.position = 'static';
    }
});

这可以确保你的 JS 在所有内容都正确加载之前不会运行。

刷新时清除内联样式 如果您确实想坚持当前的方法并只是解决刷新问题，您可以清除页面加载时的任何内联样式：

window.addEventListener('load', function() {
    var form_p_wrappers = document.querySelectorAll('form > p');
    for (var i = 0; i < form_p_wrappers.length; i++) {
        form_p_wrappers[i].removeAttribute('style');
    }
});

在使用 JavaScript 应用任何新更改之前，这会将元素重置回默认样式。

为什么会发生这种情况：

简而言之，浏览器的刷新很可能会在外部 CSS 完全加载之前重新应用内联样式，从而导致出现问题。切换到类或延迟 JS 可以帮助避免这种情况。

希望这有帮助！如果您需要更多信息或澄清，请告诉我。