CSS選擇器修改樣式，及單獨修改樣式this.style.
阿新 • • 發佈：2019-01-29
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="關燈" onclick="Switch()" />
</body>
</html>
單獨修改樣式的屬性使用“style.屬性名”，css在javascript中操作的時候的屬性名可能不同有“-”
Style.frontSize:front-size
Style.margainTop:margain-top
<input type="button" value="AAA" onclick="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.onblur=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 onload="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.onclick=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 onload="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" onclick="alert(event.srcElement.value)"/>
<input type="button" value="click2" onclick="alert(this.value)"/>
<input type="button" value="click3" onclick="btnClick3()"/>
<input type="button" value="click4" onclick="btnClick4(this)"/>
<input type="button" value="click5" onclick="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.onclick=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="關燈" onclick="Switch()" />
</body>
</html>
單獨修改樣式的屬性使用“style.屬性名”，css在javascript中操作的時候的屬性名可能不同有“-”
Style.frontSize:front-size
Style.margainTop:margain-top
<input type="button" value="AAA" onclick="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.onblur=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 onload="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.onclick=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 onload="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" onclick="alert(event.srcElement.value)"/>
<input type="button" value="click2" onclick="alert(this.value)"/>
<input type="button" value="click3" onclick="btnClick3()"/>
<input type="button" value="click4" onclick="btnClick4(this)"/>
<input type="button" value="click5" onclick="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.onclick=btnClick6;
</script>