61,112
社区成员
发帖
与我相关
我的任务
分享点击按钮生成无序列表没有样式？
求助各位大神，为什么点击按钮生成之后没有样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成10个li</title>
<style type="text/css">
ul{
list-style: none;
padding: 0px;
}
li{
border: 1px solid black;
width: 50px;
height: 50px;
float: left;
line-height: 45px;
text-align: center;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
</style>
<script type="text/javascript">
function createLi(){
document.write("<ul>");
for(var i=0;i<10;i++){
if(i%4==0){
document.write("<li class='red'>"+i+"</li>");
}
if(i%4==1){
document.write("<li class='yellow'>"+i+"</li>");
}
if(i%4==2){
document.write("<li class='blue'>"+i+"</li>");
}
if(i%4==3){
document.write("<li class='green'>"+i+"</li>");
}
}
document.write("</ul>");
}
</script>
</head>
<body>
<input type="button" id="" value="生成10个li" onclick="createLi()" />
</body>
</html>
...全文
请发表友善的回复…
发表回复
飞不起来的小菜鸟 2017-08-01
- 打赏
- 举报
可以的，谢谢了
霜月枫桥 2017-07-25
- 打赏
- 举报
document.write()会对页面进行重写，你可以在浏览器中摁F12看一下，页面内容除了你使用document.write()写的，其它的都消失了。
我给你修改了一下，代码如下：
<style type="text/css">
ul{
list-style: none;
padding: 0px;
}
li{
border: 1px solid black;
width: 50px;
height: 50px;
float: left;
line-height: 45px;
text-align: center;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
</style>
<script type="text/javascript">
function createLi(){
var htmlCode="<ul>";
for(var i=0;i<10;i++){
if(i%4==0){
htmlCode+="<li class='red'>"+i+"</li>";
}
if(i%4==1){
htmlCode+="<li class='yellow'>"+i+"</li>";
}
if(i%4==2){
htmlCode+="<li class='blue'>"+i+"</li>";
}
if(i%4==3){
htmlCode+="<li class='green'>"+i+"</li>";
}
}
htmlCode+="</ul>";
document.getElementById("div1").innerHTML=htmlCode;
}
</script>
</head>
<body>
<input type="button" id="" value="生成10个li" onclick="createLi()" />
<div id="div1"></div>
</body>
