使用不帶FOUC的JavaScript更改元素上的CSS類
[英]Change CSS class on an element using JavaScript without FOUC
問題描述
我找到了使用JavaScript更改元素類的HTML5方法。
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消失？
2 個解決方案
解決方案1
1 2016-08-05 16:16:15
當瀏覽器解析您的HTML文件時，他將在找到JavaScript的確切位置（內聯或通過引用<script src="script.js"> ）執行您的JavaScript。 因此，您有2種可能性可以避免提到的FOUC。
您可以更早地執行JavaScript（例如，在操作該類的元素正下方，作為內聯javascript）。 最好僅設置1個“媒體查詢類”（例如，在
body-tag上），並將相應的腳本放在下面隱藏內容，直到執行JavaScript。 例如，您可以做這樣的事情
的HTML
<body class="loading">
...
</body>
的CSS
body.loading {
visibility: hidden;
}
JS
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")
解決方案2
0 2016-08-06 11:34:59
我通過創建局部視圖並使用Bootstraps響應實用程序類hidden-xs，hidden-sm等解決了該問題。
如何使用javascript更改元素css類運行時
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.