在前端頁(yè)面開(kāi)發(fā)中，我們經(jīng)常需要使用JavaScript來(lái)操作CSS樣式，但是由于JavaScript會(huì)阻塞頁(yè)面渲染，所以我們通常會(huì)把JavaScript的引入放在頁(yè)面底部，也就是放在</body>標(biāo)簽前面。這樣可以保證頁(yè)面的內(nèi)容能夠盡快的呈現(xiàn)給用戶，不至于出現(xiàn)一片空白的情況。
然而，在某些情況下，我們需要先執(zhí)行JavaScript代碼，然后再執(zhí)行CSS樣式，比如說(shuō)我們需要在頁(yè)面加載完成后，先進(jìn)行一些計(jì)算后再設(shè)置CSS樣式，這時(shí)候我們就需要讓JavaScript在CSS之前執(zhí)行。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript在CSS之前執(zhí)行</title>
<style>
p {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<p>Hello World!</p>
<script>
// 等待文檔加載完成后執(zhí)行
document.addEventListener('DOMContentLoaded', function() {
// 計(jì)算
var p = document.getElementsByTagName('p')[0];
var width = p.offsetWidth;
// 設(shè)置CSS樣式
p.style.width = width + 'px';
});
</script>
</body>
</html>以上代碼演示了一個(gè)例子，我們?cè)贘avaScript中獲取了<p>標(biāo)簽的寬度，并設(shè)置成了該標(biāo)簽的寬度，使它始終保持寬度不變。
為了讓JavaScript在CSS之前執(zhí)行，我們可以把JavaScript代碼放在<head>標(biāo)簽里，并使用window.onload事件，這個(gè)事件會(huì)在頁(yè)面資源全部加載完成后觸發(fā)，包括CSS、圖片和其他資源。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript在CSS之前執(zhí)行</title>
<style>
p {
font-size: 20px;
color: red;
}
</style>
<script>
window.onload = function() {
// 計(jì)算
var p = document.getElementsByTagName('p')[0];
var width = p.offsetWidth;
// 設(shè)置CSS樣式
p.style.width = width + 'px';
};
</script>
</head>
<body>
<p>Hello World!</p>
</body>
</html>以上代碼中，我們把JavaScript代碼放在了<head>標(biāo)簽中，并使用window.onload事件來(lái)執(zhí)行JavaScript代碼。這樣，JavaScript代碼就會(huì)在CSS樣式之前執(zhí)行了。