nth-of-type()可以判断奇偶,虽然有可能低版本IE不支持,但是视觉效果的话低版本放弃就完了。
<style>
ul li:nth-of-type(odd){奇数行样式}
ul li:nth-of-type(even){偶数行样式}
<style>
如果我说服不了你,一定要js的话,那么继续:
<script id="jquery_182" type="text/javascript"世中搏 class="library"
src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
<meta charset="utf-8" />
<ul id="list">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<script>
function CheckLI() {
var obj = document.getElementById("list").getElementsByTagName("li")//取得#list下所有li
for(var i=0i<obj.lengthi++){//循环出培仿每个li
//下面两句中添加class用的jquery的addClass()方法,需要载入JQ才支持,js原生的方法需要IE10才支持,兼容的方法要另外写函数,手打搜祥的,直接最简单的JQ实现
if(i % 2 == 0) {$(obj[i]).addClass("ou")}//如果被2整除是偶数
else {$(obj[i]).addClass("ji")}//否则是奇数
}
}
window.onload = CheckLI//网页载入后执行以上函数
</script>
<style>
.ji{color: red}
.ou{color: yellow}
</style>
1、首先在html中布雹并局好两个按钮和一个div。
2、接着编写添加class的方法。
3、运行页面以后看到如下图所示的界面。
4、点击添加class按钮就可以看到div中多了样式。
5、接下来在编写移除class样式胡肆陵,如下图所裤戚示要的是remove。
6、最后运行界面,点击移除class按钮,class就被移除了。
以给 body 标签添加 class 为例
通过 jQuery
$( 'body').addClass( 埋坦腊'class1 class2' )$( 'body'弯滑 ).removeClass( 'class1 class2' )
支持 classList 的高级浏览器(IE10+,Chrome,Firefox,Safari)
document.body.classList.add( 'class1'信衡, 'class2' )document.body.classList.remove( 'class1', 'class2' )
不支持 classList 的浏览器只能通过 className 来添加
document.body.className += ' class1 class2'欢迎分享,转载请注明来源:内存溢出
评论列表(0条)