测试个小案例
分别给奇数,偶数定义不同的方法,实现方法有以下两种:
css:
标签名:nth-child(odd) {float:left;}
标签名:nth-child(even) {float:right;}
js:
<script>
window.onload = function(){
var border = document.getElementsByClassName("border");
var borderLength = document.getElementsByClassName("border").length;
for (var i = 0; i < borderLength; i++) {
if(i%2 == 0){
console.log(i + "偶数");
border[i].style.cssText = "float:left";
/* border[i].style.float = "left";*/
}else{
console.log(i +"奇数");
border[i].style.cssText = "float:right";
/* border[i].style.float = "right";*/
}
}
}
</script>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 border">
<img src="images/tv-box-350-350.jpg" />
</div>
<div class="col-md-6 col-sm-6 border">
<img src="images/tv-box-350-350.jpg" />
</div>
<div class="col-md-6 col-sm-6 border">
<img src="images/tv-box-350-350.jpg" />
</div>
<div class="col-md-6 col-sm-6 border">
<img src="images/tv-box-350-350.jpg" />
</div>
</div>
</div>
学习记录,以上仅供参考!