在沒有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類

回答

相關問題