javascript - When exactly starts rendering of a HTML DOM node?
问题描述
Consider the following example:
<div class="col-2">Some content</div>
<main>
<!-- lot of content here, including many images etc. -->
</main>
<div id="lastColumn" class="col-2">Last column content</div>
<script>
if (localStorage.getItem("lastColumnDisplayed") == "false") {
document.getElementById("main").style.classList.add("col-10");
document.getElementById("lastColumn").style.display = "none";
} else {
document.getElementById("main").style.classList.add("col-8");
document.getElementById("lastColumn").style.display = "block";
}
</script>
Are the elements within the <main>
already being rendered in the time when the <script>
is executed? I ask because images and tables within the <main>
have theirs width
(i.e. the images are scaled) dependent on the <main>
width, which is defined by bootstrap's grid class .col-8
or .col-10
.
Does it have any sense to try to add the class directly when defining the opening <main>
tag? Example:
<div class="col-2">Some content</div>
<script>
document.write('<main class="' + getColumnClass() + '">');
</script>
<!-- lot of content here, including many images etc. -->
</main>
<div class="col-2">Some content</div>
<!-- ... -->
解决方案
推荐阅读
- java - Lanterna - 你如何创建一个简单的 CheckBox 菜单?
- r - 在 R 中将函数与 while 循环集成
- r - 使用 selectinput 从数据框中提取列值
- python - 如何在 Matplotlib 中绘制 Excel 文件中的特定行?
- celery - 在 Windows 10 中用芹菜执行花时出错
- excel - Excel查找和替换函数正确公式
- couchdb - How to set attachment size limit for an individual database
- c# - .net core console authenticate to AWS Cognito onpremise AD FS SAML
- mysql - AS compatibility: “.. from T as a..” works in MySQL and SQL Server, not Oracle?
- c++ - How to pick points inside a circle in OpenGL?