使用不带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.