JS改变div背景色
这个效果是在CSS中一个一个改变颜色做的，能不能用JS定义一个数组，数组里是各种定义好的颜色，让它逐个加入到div里，也能实现同样的效果呢？后期div会利用数据库循环，所...
这个效果是在CSS中一个一个改变颜色做的，能不能用JS定义一个数组，数组里是各种定义好的颜色，让它逐个加入到div里，也能实现同样的效果呢？后期div会利用数据库循环，所以不能一个一个用CSS加背景色，只能用JS数组遍历加进去背景色，JS的代码应该怎么写？
展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<title> js随机改变标签背景颜色 </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
* { margin:0; padding:0; }
body {font-size:12px;line-height:150%;font-family:"微软雅黑", Arial;text-align:center;}
h3 {font-size:16px;line-height:150%;}
.wrap {width:300px;margin:0 auto;}
.wrap ul {padding:15px 0;}
.wrap li {display:block;width:100%;overflow:hidden;height:30px;background:red;margin-top:5px;}
</style>
<script type="text/javascript">
function switchColor() {
var c = ['#111', 'red', 'green', 'blue', '#ace', '#f60', '#ccc'];
var li = document.getElementById("bg").getElementsByTagName("li");
if(li) {
var total = c.length;
for(var i = 0, j = li.length; i < j; i++) {
// 随机颜色
var rnd = Math.floor(Math.random() * total);
li[i].style.backgroundColor = c[rnd];
}
}
}
</script>
</head>
<body>
<h3>js随机改变标签背景颜色</h3>
<div class="wrap">
<ul id="bg">
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
<li>第6个</li>
</ul>
<input type="button" value="输入：1" onclick="switchColor();" />
</div>
</body>
</html>
这里为了方便直接用的LI标签，DIV也是一样的，由于颜色和LI标签的数量可以不同，所以用了个随机颜色，你稍微调整下就可以了，不过这个用jQuery额each来遍历最简单
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
