我有一个带有 ul li div
的主页,div 是一个方框,顶部有 3x3。
我网站的底部是代码生成的标记,我有类似的东西。
我想给每个div“盒子”一种颜色,目前它们都是用css设计的。 jquery 有没有办法检查 ul li div,如果 div 存在,则向内联样式添加不同的颜色?我需要将颜色存储在脚本中。
这就是我如何开始?:
$("div.box").css({"background-color": "color"});
这是我削减标记的示例:
<ul>
<li data-target="aboutme" data-target-activation="click" style="margin-top:0px" class="tile high me">
<div>
<h2>About Me</h2>
<h3></h3>
<img width="48" height="48" alt="" class="icon" src="images/icons/x.png">
</div>
</li>
<li data-target="aboutme" data-target-activation="click" style="margin-top:0px" class="tile high me">
<div>
<h2>Pane 2</h2>
<h3></h3>
<img width="48" height="48" alt="" class="icon" src="images/icons/x.png">
</div>
</li>
<li data-target="aboutme" data-target-activation="click" style="margin-top:0px" class="tile high me">
<div>
<h2>Pane 3</h2>
<h3></h3>
<img width="48" height="48" alt="" class="icon" src="images/icons/x.png">
</div>
</li>
</ul>
这是CSS:
.tiles {
height: 95%;
margin: 0 auto;
min-height: 950px;
overflow: visible;
padding: 10px;
width: 957px;
}
.tile.high {
float: left;
height: 200px;
margin-top: -100px;
padding-left: 10px;
width: 23.6%;
}
li.tile div {
background-color: #00ABA9;
}
.tile div {
background-repeat: no-repeat;
height: 100%;
margin: 10px 10px 0;
overflow: hidden;
width: 100%;
}
最佳答案
循环遍历 div 并在每个 div 上使用不同的颜色:
// Declare colors you want to use
var myColors = [
'#f00', '#abc', '#123'
];
var i = 0;
$('div.box').each(function() {
$(this).css('background-color', myColors[i]);
i = (i + 1) % myColors.length;
});
关于javascript - 使用 jquery 或 javascript 将每个 div 设置为不同的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11070007/