在没有FOUC的情况下使用JavaScript更改元素上的CSS类

我找到了使用JavaScript更改元素类的HTML5方法。在没有FOUC的情况下使用JavaScript更改元素上的CSS类

HTML：

<div id="bootstrap-container" class="container-fluid fill-height"> 
    <!-- Content --> 
</div>

的JavaScript：

var mql = window.matchMedia('(min-width: 1200px)'); 
if (mql.matches) { 
    var containerElement = document.querySelector('#bootstrap-container'); 
    if (containerElement.classList.contains('container-fluid')) { 
     containerElement.classList.remove('container-fluid'); 
     containerElement.classList.add('container'); 
    } 
}

这工作得很好，除了有一个明显的FOUC加载/刷新页面时。

如何使FOUC消失？

来源

2016-08-05 PussInBoots

我期望任何依赖于JS的样式都可能具有FOUC的可能性，这看起来像只是一个CSS媒体查询（通常不太容易创建FOUC）。 – DBS

同意，但在这种情况下，引导程序中的内置容器类包含很多样式，这些样式必须在样式表的媒体查询块中被重写，并且这不是一件容易的事情。 – PussInBoots

@DBS一般来说你是对的，但有一些（有效的）案例/逻辑，媒体查询无法涵盖。 – MattDiMu

当浏览器解析你的HTML文件时，他会在你发现它的地方执行你的JavaScript（内嵌或通过引用<script src="script.js">）。因此你有两种可能性来避免提到的FOUC。

您可以在早期执行JavaScript（例如，在操作类的元素正下方的内联JavaScript）。最好只设置1个“媒体查询类”（例如body-tag），并将相应的脚本正好放在下面
您隐藏了内容，直到执行完JavaScript代码。例如。你可以做这样的事情

HTML

<body class="loading"> 
... 
</body>

CSS

body.loading { 
    visibility: hidden; 
}

var mql = window.matchMedia('(min-width: 1200px)'); 
if (mql.matches) { 
    var containerElement = document.querySelector('#bootstrap-container'); 
    if (containerElement.classList.contains('container-fluid')) { 
     containerElement.classList.remove('container-fluid'); 
     containerElement.classList.add('container'); 
    } 
} 

document.body.classList.remove("loading")

来源

2016-08-05 16:16:15 MattDiMu

我解决它通过创建一个局部视图，并使用引导程序响应程序类隐藏xs，hidde n-sm等。

来源

2016-08-06 11:34:59 PussInBoots

在没有FOUC的情况下使用JavaScript更改元素上的CSS类

回答

相关问题