在html元素的对象上，有style这个属性，控制我们的样式
<script>
var oLi=document.getElementsByTagName('li');
var color=['red','yellow','blue'];
// var colors='';
for(var i=0;i<oLi.length;i++){
oLi[i].style.background=color[i%3];
oLi[i].index=i;
oLi[i].onmouseover=function(){
// colors=this.style.background;
this.style.background='grey';
}
oLi[i].onmouseout=function(){
this.style.background=colors[this.index%3];
}
}
</script>
运算符：+，-，*，/
赋值：=，+=，-=，*=，/=,%=
比较运算符：<,>,<=,>=,==,!=,===
===: 严格相等；数据类型和值都必须相等
逻辑运算符：&&与，||或，！非
逻辑运算符跟boolean类型有关；&&，||：两边都要是布尔值
出了undefined，null，NaN，0，' ',其它的都可以看成真true
checked是单选框和复选框的特有属性，表示是否选中
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>AAAA</td>
<td>AAAAAAAA</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>AAAA</td>
<td>BBBBBBB</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>AAAA</td>
<td>BBBBBBBB</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>AAAA</td>
<td>BBBBBBB</td>
</tr>
</tbody>
</table>
<div>
<input type="checkbox" id="all" />全选
</div>
<script>
var oAll=document.getElementById('all');
var oTable=document.getElementsByTagName('table')[0];
var oInput=oTable.getElementsByTagName('input');
oAll.onclick=function(){
if(this.checked){
for(var i=0;i<oInput.length;i++){
oInput[i].checked=true;
}
}
else{
for(var i=0;i<oInput.length;i++){
oInput[i].checked=false;
}
}
}
for(var i=0;i<oInput.length;i++){
oInput[i].onclick=function(){
for(var i=0;i<oInput.length;i++){
var oCheckbox=true;
if(!oInput[i].checked){
oCheckbox=false;
break;
}
}
if(oCheckbox){
oAll.checked = true;
}
else{
oAll.checked = false;
}
}
}
</script>
</body>
</html>
网友评论