使用 javascript 多次附加 html 模板并带参数
这是代码，包含所有“占位符”：( bottom: auto;)
let h = window.innerHeight;
var x = document.getElementsByTagName("BODY")[0];
x.style = "height: " + h + "px;";
window.addEventListener('resize', function(event){
x = document.getElementsByTagName("BODY")[0];
h = window.innerHeight;
x.style = "height: " + h + "px;";
});
if(document.getElementById('main').offsetHeight > h) {
document.getElementById('footer').style = "bottom: auto;";
}
* {
margin: 0;
padding: 0;
}
.Placeholder
{
background-color: blue;
height: 100px;
width: 100%;
}
.MainContainer {
width: 100%;
padding: 0;
margin: 0;
background-color: green;
}
.MyFooter {
position: absolute;
bottom: 0px;
width: 100%;
background-color: red;
padding: 0;
margin: 0;
}
<body>
<div class='Header'>Header</div>
<div class="MainContainer" id="main">
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
<div class='Placeholder'></div>
</div>
<div class="MyFooter" id="footer">
This is my footer, it should always be at the bottom of the page.
</div>
</body>
慕运维80795931回答
-
冉冉说
使用for 循环和模板文字动态插入 id这是一个基本示例，它创建 10 个具有不同 id 的跨度for(let i=1;i<=10;i++){ let div=document.createElement("div"); div.innerHTML=`<span id="span${i}">Hey this is Span ${i} </span>`; document.body.append(div);}
随时随地看视频慕课网APP
相关分类
Html5