您的位置：首页 > Web前端 > JavaScript

js实现隔行换色及其鼠标滑过变色

2014-04-10 15:50 651 查看

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标换色及鼠标滑过变色</title>
<style>
body{ font-size:12px; line-height:21px; color:#3e352f;}
ul{ width:200px; list-style:none;}
.one{ background-color:#f00;}
.two{ background-color:#dddabf;}
.one.three{ background:#fff;}
.two.three{ background:#000;}
</style>
</head>
<body>
<ul>
<li>1.假字以数十字为基础假字数…</li>
<li>2.假字以数十字为基础假字数…</li>
<li>3.假字以数十字为基础假字数…</li>
<li>4.假字以数十字为基础假字数…</li>
<li>5.假字以数十字为基础假字数…</li>
</ul>
<div id='aa'>增加className</div>
<script>
function set(){
var liNode=document.getElementsByTagName('li');
for(var i=0;i<liNode.length;i++){
if(liNode[i].nodeType=='1'){
if(i%2==0){
liNode[i].className='one';
liNode[i].onmouseout=function(){
this.className='one';
}
}else{
liNode[i].className='two';
liNode[i].onmouseout=function(){
this.className='two';
}
}
liNode[i].onmouseover=function(){
this.className='three';
}

}
}
}
addClass('aa','you')
//li aa
function addClass(element,value){
var a=document.getElementById(element);
var b=a.className;
if(!b){
a.className=value;
}else{
a.className=b +' '+ value;
}
console.log(a.className);

}
onload=set;
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航