css选择器：修改样式
实现开关灯效果
<html>
<head>
<title>开关灯效果</title>
<style type="text/css">
body
{
background: #FFF;
}
.day
{
background: #000;
}
.night
{
background: #FFF;
}
</style>
<script language="javascript" type="text/javascript">
function Switch() {
var btnSwitch = document.getElementById("btnSwitch");
var type = document.body.className;
if (type == "day") {
document.body.className = "night";
btnSwitch.value = "关灯";
} else {
document.body.className = "day";
btnSwitch.value = "开灯";
}
}
</script>
</head>
<body>
<input id="btnSwitch" type="button" value="关灯" οnclick="Switch()" />
</body>
</html>
单独修改样式的属性使用“style.属性名”，css在javascript中操作的时候的属性名可能不同有“-”
Style.frontSize:front-size
Style.margainTop:margain-top
<input type="button" value="AAA" οnclick="this.style.background='red'"/>
案例1：创建三个文本框，当光标离开文本框的时候，如果文本框为空，则将文本框背景色设置为红色，如果不为空，则设置为白色
<head>
<title></title>
<script type="text/javascript">
function initEvent()
{
var inputs=document.getElementsByTagName("input");
//遍历所以input控件，添加onblur响应函数
for(var i=0;i<inputs.length;i++)
{
var input=inputs[i];
input.οnblur=inputOnblur;//注意：为input控件的onblur事件绑定inputOnblur响应函数，而不是调用某个函数
}
//失去焦点时候进行数据检查
function inputOnblur()
{
//inputOnblur是onblur的响应函数，而不是被响应函数调用的函数，所以可以用this来取得发生事件控件的对象
if(this.value.length<=0)//检查文本框中文字长度，如果<=0，则文本框为空
{
this.style.background="red";
}
else
{
this.style.background="white";
}
}
}
</script>
</head>
<body οnlοad="initEvent()">
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
<input id="Text4" type="text" />
<input id="Text5" type="text" />
</body>
</html>
案例2：评分控件：
<head>
<title>无标题页</title>
<script type="text/javascript">
function indexOf(arr,element)
{ for(var i=0;i<arr.length;i++)
{
if(arr[i]==element)
{
return i;
}
}
return -1;
}
function initEvent()
{var tableRating=document.getElementById("tableRating");
var tds=tableRating.getElementsByTagName("td");
for(var i=0;i<tds.length;i++)
{
var td=tds[i];
td.οnclick=TdOnClick;
td.style.cursor="pointer";
}
}
function TdOnClick()
{
var tableRating=document.getElementById("tableRating");
var tds=tableRating.getElementsByTagName("td");
var index=indexOf(tds,this);
for(var i=0;i<=index;i++)
{
var td=tds[i];
td.style.background="red";
}
for(var i=index+1;i<tds.length;i++)
{
var td=tds[i];
td.style.background="white";
}
}
</script>
</head>
<body οnlοad="initEvent()">
<table id="tableRating" >
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>
版本2：
是只有一个indexof（）函数，一个init（）函数在页面加载完成之后调用onload里，其中init函数里为每个td添加onmouseover事件
解惑：
为什么有的需要传this有的不需要？
<body>
<input type="button" value="click" οnclick="alert(event.srcElement.value)"/>
<input type="button" value="click2" οnclick="alert(this.value)"/>
<input type="button" value="click3" οnclick="btnClick3()"/>
<input type="button" value="click4" οnclick="btnClick4(this)"/>
<input type="button" value="click5" οnclick="btnClick5()"/>
<input type="button" value="click6" id="btn6"/>
<script>
btnClick3(){alert(this.value);}//在事件响应函数调用的函数里，不能通过this来获得事件对象
btnClick4(btn){alert(btn.value);}//在事件响应函数中，将this传过来就可
btnClick5(){alert(event.srcElement.value);}
btnClick6(){alert(this.value);}
var btn6=document.getElementById("btn6");
btn6.οnclick=btnClick6;
</script>
实现开关灯效果
<html>
<head>
<title>开关灯效果</title>
<style type="text/css">
body
{
background: #FFF;
}
.day
{
background: #000;
}
.night
{
background: #FFF;
}
</style>
<script language="javascript" type="text/javascript">
function Switch() {
var btnSwitch = document.getElementById("btnSwitch");
var type = document.body.className;
if (type == "day") {
document.body.className = "night";
btnSwitch.value = "关灯";
} else {
document.body.className = "day";
btnSwitch.value = "开灯";
}
}
</script>
</head>
<body>
<input id="btnSwitch" type="button" value="关灯" οnclick="Switch()" />
</body>
</html>
单独修改样式的属性使用“style.属性名”，css在javascript中操作的时候的属性名可能不同有“-”
Style.frontSize:front-size
Style.margainTop:margain-top
<input type="button" value="AAA" οnclick="this.style.background='red'"/>
案例1：创建三个文本框，当光标离开文本框的时候，如果文本框为空，则将文本框背景色设置为红色，如果不为空，则设置为白色
<head>
<title></title>
<script type="text/javascript">
function initEvent()
{
var inputs=document.getElementsByTagName("input");
//遍历所以input控件，添加onblur响应函数
for(var i=0;i<inputs.length;i++)
{
var input=inputs[i];
input.οnblur=inputOnblur;//注意：为input控件的onblur事件绑定inputOnblur响应函数，而不是调用某个函数
}
//失去焦点时候进行数据检查
function inputOnblur()
{
//inputOnblur是onblur的响应函数，而不是被响应函数调用的函数，所以可以用this来取得发生事件控件的对象
if(this.value.length<=0)//检查文本框中文字长度，如果<=0，则文本框为空
{
this.style.background="red";
}
else
{
this.style.background="white";
}
}
}
</script>
</head>
<body οnlοad="initEvent()">
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
<input id="Text4" type="text" />
<input id="Text5" type="text" />
</body>
</html>
案例2：评分控件：
<head>
<title>无标题页</title>
<script type="text/javascript">
function indexOf(arr,element)
{ for(var i=0;i<arr.length;i++)
{
if(arr[i]==element)
{
return i;
}
}
return -1;
}
function initEvent()
{var tableRating=document.getElementById("tableRating");
var tds=tableRating.getElementsByTagName("td");
for(var i=0;i<tds.length;i++)
{
var td=tds[i];
td.οnclick=TdOnClick;
td.style.cursor="pointer";
}
}
function TdOnClick()
{
var tableRating=document.getElementById("tableRating");
var tds=tableRating.getElementsByTagName("td");
var index=indexOf(tds,this);
for(var i=0;i<=index;i++)
{
var td=tds[i];
td.style.background="red";
}
for(var i=index+1;i<tds.length;i++)
{
var td=tds[i];
td.style.background="white";
}
}
</script>
</head>
<body οnlοad="initEvent()">
<table id="tableRating" >
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>
版本2：
是只有一个indexof（）函数，一个init（）函数在页面加载完成之后调用onload里，其中init函数里为每个td添加onmouseover事件
解惑：
为什么有的需要传this有的不需要？
<body>
<input type="button" value="click" οnclick="alert(event.srcElement.value)"/>
<input type="button" value="click2" οnclick="alert(this.value)"/>
<input type="button" value="click3" οnclick="btnClick3()"/>
<input type="button" value="click4" οnclick="btnClick4(this)"/>
<input type="button" value="click5" οnclick="btnClick5()"/>
<input type="button" value="click6" id="btn6"/>
<script>
btnClick3(){alert(this.value);}//在事件响应函数调用的函数里，不能通过this来获得事件对象
btnClick4(btn){alert(btn.value);}//在事件响应函数中，将this传过来就可
btnClick5(){alert(event.srcElement.value);}
btnClick6(){alert(this.value);}
var btn6=document.getElementById("btn6");
btn6.οnclick=btnClick6;
</script>
2735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
